为 什么 要 写 这 本 书 


从 2011 年 开始 ， 移 动 游戏 开发 引擎 Cocos2D-X 凭 借 其 开源 、 易 用 和 简单 的 特点 逐步 成 为 开发 者 开发 二 维 手 机 游戏 的 首选 。 截 止 2013 年 年 底 ， 国 内 45 个 月 收入 超 干 万 的 游戏 中 ， 有 30 个 是 基于 Cocos2D- 
X 开 发 ， 占 67%。 中 国 区 苹果 畅销 榜 前 10 名 游戏 中 ， 平 均 7 个 是 基于 Cocos2D-X 开 发 ; 安 卓 360 市 场 下 载 榜 前 10 名 游戏 中 ， 平 均 5 个 基于 Cocos2D-X 开 发 。 在 中 国手 游 引 警 领 域 ，Cocos2D-X 引 警 以 70% 的 占 
有 率 和 过 硬 的 技术 支撑 占据 着 绝对 高 地 。 除 了 开发 功能 上 具备 多 维度 外 ， 在 使 用 角色 和 用 途上 Cocos2D-X 也 在 不 断 向 其 他 领域 渗透 。 小 米 电 视 的 UI 采用 Cocos2D-X 开 发 ， 新 东方 线 上 教育 平台 的 应 用 采用 
Cocos2D-HTML5 开 发 。 除 了 在 国内 ，Cocos2D-X 在 日 韩 也 有 广泛 的 应 用 ，Google Play 韩国 区 畅销 榜 前 15 名 游戏 中 ， 有 9 款 游戏 都 是 基于 Cocos2D-X 开 发 的 。 击 败 苹果 应 用 商店 ， 在 日 本 区 霸占 榜首 一 年 
半 之 久 游戏 的 《Monster Strike》 也 是 由 Cocos2D-X 开 发 ， 另 外 在 该 榜 单 上 前 五 名 的 游戏 有 3 款 采 用 Cocos2D-X 开 发 ， 这 是 Cocos2d-X 游 戏 再 次 在 一 个 移动 游戏 重要 区 域 拿 下 总 榜 第 一 。 


相 比 起 Cocos2D-X 的 “兄长 ”Cocos2D-iPhone，Cocos2D-X 凭 借 其 跨 平台 的 特性 受到 更 多 开发 者 的 欢迎 ， 所 以 从 2013 年 开始 ，Cocos2D 家 族 由 Cocos2D-iPhone 和 Cocos2D-X 的 联合 发 布 逐步 将 重 
心 转 移 到 Cocos2D-X 上 来 。 在 2013 年 9 月 底 的 CocoaChina 秋 季 开 发 者 大 会 中 ，Cocos2D-X 创 始 人 王 哲 宣布 了 Cocos2D-X 的 3.0 计 划 ， 并 且 Cocos2D 第 一 开发 者 Ricardo Quesada 正 式 加 盟 触 控 科技 ， 将 主 
导 Cocos2D-X 的 3.0 版 本 开发 ， 这 正式 预示 着 Cocos2D-X 取 代 Cocos2D-iPhone 成 为 Cocos2D 最 重要 的 分 支 ， 另 外 Cocos2D 的 最 重要 编辑 器 也 由 之 前 的 CocosBuilder 变 成 了 之 前 由 触 控 科 技 团队 主导 开发 的 
Cocostudio， 相 比 于 之 前 1.0 版 本 到 2.0 版 本 的 进化 ， 这 次 进化 更 有 跨 时 代 的 价值 。Cocos2D 引 警 家 族 进入 “3.0” 时 代 。 


相 比 于 2.0 版 本 ， 这 次 对 于 引擎 的 改动 和 优化 是 前 所 未 有 的 ， 大 体 上 就 是 全 面 引 入 C+ + 风格 、 去 除 Objective-C 风 格 ， 而 对 代码 的 重新 审核 和 重 构 确保 了 引擎 在 效率 上 的 显著 提升 ， 同 时 加 入 全 新 的 泻 染 
系统 、 全 新 的 事件 分 发 和 注册 方式 ， 并 对 于 之 前 保守 批评 的 UI 控 件 进行 了 全 面 的 重 写 。 另 外 还 完善 了 开发 工具 ， 比 如 新 建 项 目的 命令 行 方式 和 Lua 代 码 编辑 器 等 ， 可 以 说 这 次 的 版 本 提升 不 论 从 广度 和 深度 
上 ， 都 有 了 较 大 的 提升 。 


本 书 第 1 版 上 市 以 来 ， 受 到 读者 的 广泛 好 评 ， 但 是 由 于 这 次 引擎 的 较 大 幅度 改进 ， 已 经 不 能 满足 读者 的 需要 ， 另 外 一 些 读者 希望 学 习 脚 本 等 方面 的 内 容 ， 正 是 因为 这 些 反 馈 和 需求 ， 我 才 有 了 编写 本 书 第 
2 版 的 想法 ， 这 一 版 不 仅 针对 引 警 更新， 同时 对 原 有 内 容 和 实例 进行 了 扩充 ， 和 希望 继续 成 为 广大 Cocos2D-X 使 用 者 的 入 门 图 书 和 工作 中 的 案头 参考 书 。 
读者 对 象 

.Cocos2D-X 初 级 及 中 级 开发 者 ， 了 解 C++ 语言 和 游戏 开发 的 读者 ; 

- 没有 接触 过 Cocos2D-X， 但 有 过 Cocos2D 其 他 版 本 开发 经 验 的 开发 者 ; 

: 没有 Cocos2D-X 和 C++ 开发 经 验 ， 但 是 有 C、Java 等 语言 开发 经 验 的 游戏 程序 员 ; 

` 相关 项 目的 策划 及 管理 人 员 

` 游戏 开发 爱好 者 ; 


开设 相关 课程 的 大 专 院 校 。 


如 何 阅读 本 书 


本 书 分 为 三 大 部 分 : 


第 一 部 分 为 基础 篇 (第 1~10 章 ) ， 首 先 介绍 了 Cocos2D-X 的 下 载 与 安装 ， 以 及 交叉 编译 环境 的 搭建 ， 然 后 重点 讲解 了 Cocos2D-X 中 的 核心 类 、 贴 图 类 、 动 作 、 动 画 、 特 效 、 文 字 和 字体 、 事 件 处 理 、 
地 图 、 声 音 以 及 物理 引擎 的 使 用 ， 这 部 分 结合 Cocos2D-X 自 带 的 tests 实 例 进 行 讲 解 ， 目 的 是 让 读者 全 面 掌 握 Cocos2D-X 的 基础 理论 和 基本 使 用 。 


二 部 分 为 高 级 篇 (第 11~16 章 ) ， 介 绍 了 Cocos2D-X 中 的 脚本 引擎 ， 常 用 算法 在 Cocos2D-X 中 的 实现 ， 粒 子 系统 ， 着 色 器 的 使 用 和 相关 编辑 器 ， 在 基础 上 进一步 介绍 引擎 相关 的 内 容 ， 目 的 是 让 读者 
更 加 全 面 地 了 解 Cocos2D-X 的 使 用 。 


第 三 部 分 为 实战 篇 (第 17~20 章 ) ， 采 用 Cocos2D-X 分 别 开 帮 了 一 款 纵 版 设计 游戏 、 横 板 动作 游戏 、 物 理 类 游戏 和 消除 类 游戏 ， 旨 在 让 读者 深入 了 解 Cocos2D-X 的 基础 知识 在 游戏 开发 中 的 实战 使 用 ， 
而 且 两 种 游戏 分 别 代表 了 横 板 卷轴 和 纵 版 卷轴 ， 可 以 让 开发 者 深入 了 解 不 同类 型 的 游戏 的 开发 思想 。 


如 果 你 是 一 名 对 Cocos2D-X 有 一 定 了 解 的 开发 者 ， 可 以 从 第 3 章 开 始 阅 读 ， 而 如 果 你 是 一 个 Cocos2D-X 的 初学 者 ， 请 从 第 1 章 开 始 阅读 。 


第 2 版 与 第 1 版 的 区 别 


Cocos2D-X 引 擎 基础 内 容 根据 3.0 版 本 重新 编写 。 更 新 已 有 内 容 ， 添 加 新 增 功能 ， 比 如 UI 控 件 和 全 新 泻 染 系统 ， 等 等 。 
: 添加 Cocos2D-X 脚 本 相关 内 容 。 从 语言 特点 到 在 引擎 中 的 使 用 ， 再 到 注意 事项 ， 全 面 学 习 Cocos2D-X 脚 本 绑 定 。 
: 添加 Shader 等 引擎 高 级 特性 。 

:完善 游戏 实例 ， 实 例 个 数 由 原来 的 两 个 变 成 四 个 ， 并 且 四 个 实例 分 别 采 用 不 同 知识 点 。 

- 介绍 CocosBuilder 和 CocoStudio 两 大 编辑 器 。 

具体 章节 调整 如 下 : 

第 1 章 : 原版 第 1 章 ， 内 容 更 新 ， 更 新 了 Cocos2D-X 的 使 用 数据 ， 主 要 是 后 半 部 分 。 

第 2 章 : 原版 第 2 章 ， 内 容 更 新 ， 新 版 本 安装 做 了 很 大 调整 ， 新 增 了 一 些 工具 。 

第 3 章 、 第 4 章 : 原版 第 3 章 ， 优 化 图 片 内 存 部 分 放 到 第 4 章 。 

第 5 章 : 原版 第 4 章 ， 新 添加 Flash 转 换 一 节 ， 其 他 节 更 新 了 最 新 的 API 接 口 。 

第 6 章 : 原版 第 5 章 ， 更 新 了 最 新 的 API 接 口 。 


第 7 章 : 原版 第 6 章 ， 新 版 本 变化 很 大 ， 内 容 做 了 很 大 改变 ， 添 加 了 UI 控件 的 介绍 。 


第 8 章 : 原版 第 7 章 ， 更 新 为 最 新 版 本 ， 添 加 最 新 功能 ， 即 8.1.4 节 介绍 的 地 形 功能 。 
第 9 章 : 原版 第 8 章 ， 更 新 API 接 口 。 

第 10 章 : 原版 第 10 章 ， 最 后 添加 物理 精灵 介绍 。 

第 11 章 、 第 12 章 : 为 新 增加 的 章 ， 讲 述 Cocos2D-X 中 的 脚本 语言 Lua 和 JavaScript 的 应 用 。 
第 13 章 : 原版 14 章 ， 更 新 代码 ， 其 他 不 变 。 

第 14 章 : 原版 13 章 ， 更 新 接口 和 编辑 器 版 本 ， 最 后 添加 新 的 编辑 器 介绍 。 

第 15 章 : 为 新 添 章节 ， 介 绍 着 色 器 的 应 用 。 

第 16 章 : 原版 第 9 章 ， 改 动 较 大 ， 主 要 针对 编辑 器 部 分 。 

第 17 章 : 原版 11 章 ， 采 用 Js 绑 定 重 写 编写 。 

第 18 章 : 原版 12 章 ， 代 码 有 更 新 。 


第 19，20 章 : 为 新 增加 的 章 ， 新 增 两 个 实用 的 案例 开发 ， 并 给 出 详细 解析 。 


勘误 和 支持 


除 封面 署名 外 ， 参 与 本 书 的 还 有 实例 中 部 分 游戏 的 美术 人 员 : 其 中 第 17 和 19 章 游戏 实例 的 美术 人 员 许 及 (新 浪 微 博 地 址 : http://weibo.com/ashjackt) ， 第 18 和 20 章 游戏 实例 的 美术 人 员 李 祖 一 (新 
浪 微 博 地 址 : http://weibo.com/u/1893797647) 。 由 于 作者 的 水 平 有 限 ， 编 写 时 间 仓 促 ， 书 中 难免 会 出 现 一 些 错误 或 者 不 准确 的 地 方 ， 居 请 读者 批评 指正 。 为 了 方便 与 大 家 交流 ， 我 申请 了 相关 的 QQ 计 
论 群 ( 群 号 : 240533393， 验 证 信息 为 : 2dx3.0hzbook) ， 大 家 有 问题 可 以 在 群 中 提出 ， 我 也 会 及 时 解答 并 且 在 群 中 更 新 书 中 的 错误 。 书 中 的 全 部 源 文件 可 以 从 华章 网 站 【1 下载 ， 我 也 会 将 相应 的 功能 
新 及 时 更 正 出 来 。 如 果 你 有 更 多 的 宝贵 意见 ， 也 欢迎 发 送 邮件 至 邮箱 manshuoquan@sina.cn， 期 待 能 够 得 到 你 们 的 真挚 反馈 。 
致谢 

首先 感谢 Cocos2D 以 及 Cocos2D-X 的 开发 团队 ， 感 谢 他 们 为 广大 游戏 开发 者 开发 出 一 款 如 此 优秀 的 游戏 引擎 。 
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感谢 我 的 好 朋友 许 鹏 和 李 祖 一 ， 他 们 为 本 书 同样 付出 了 汗水 和 努力 ， 感 谢 他 们 富有 创意 的 游戏 美术 设计 。 
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谨 以 此 书 献 给 我 最 杀 爱 的 家 人 ， 以 及 众多 热爱 游戏 开发 和 Cocos2D-X 的 朋友 们 ! 
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[1] 参见 华章 网 站 www.hzbook.com。 


编者 注 


第 一 部 分 “基础 篇 


- 第 1 章 ”认识 Cocos2D-X 

* 第 2 章 ”搭建 跨 平 台 的 开发 环境 

. 第 3 章 ”Cocos2D- 义 中 的 核心 类 

- 第 4 章 Cocos2D-X 84 E] J ig ЖЖ 

. B5% ”Cocos2D-X 中 的 动作 、 特 效 与 动画 

: 第 6 章 “Cocos2D-X 中 的 菜单 项 和 文本 泻 染 系统 
. 第 7 章 Cocos2D- 叉 中 的 事件 处 理 机 制 和 UI 控件 
· 第 8 章 ”Cocos2D- 久 中 的 瓦 片 地 图 集 


: 第 9 章 “ Cocos2D-X 中 的 声音 、 存 储 和 网 络 


: 第 10 章 ”Cocos2D-X 中 的 物理 引擎 


第 1 草 ”认识 Cocos2D-X 


在 这 个 “不 愿 等 待 ”的 时 代 ， 人 们 更 需要 “随时 随地 ”与 人 通信 或 享受 服务 。 相 比 台 式 计算 机 、 笔 记 本 电脑 ， 移 动 设 备 是 最 贴近 消费 者 的 媒体 。 由 于 智能 手机 的 兴起 ， 移 动 电话 的 更 新 换代 越 来 越 快 。 
而 手机 作为 “ 带 有 体温 ”的 设备 ， 有 更 多 功能 的 需求 ， 移 动 互 联网 时 代 的 到 来 ， 移 动 应 用 成 为 了 大 家 生活 中 的 一 部 分 ， 而 游戏 作为 人 的 天 性 ， 在 移动 应 用 中 更 是 占有 举足轻重 的 位 置 。 在 游戏 开发 中 ， 引 擎 
可 以 起 到 提高 开发 效率 、 提 高 游戏 品质 的 作用 ，Cocos2D 系 列 在 众多 游戏 引擎 中 脱颖而出 ， 成 为 众多 开发 者 的 首选 ， 本 章 就 带领 大 家 走 进 Cocos2D 和 Cocos2D-X 的 世界 。 


1.1 什么 是 Cocos2D 


大 家 认识 并 且 熟 悉 Cocos2D， 应 该 是 从 App Store 上 几 款 非常 火爆 的 游戏 开始 的 ， 但 是 实际 上 Cocos2D 引 警 最早 并 非 是 为 iOS (iPhone Operating System) 设计 的 ， 最 早 它 是 一 款 用 Python 语 言 开发 
的 游戏 引擎， 后 来 使 用 Objective-C 移 植 为 jiOSs 平 台 的 Cocos2D-iPhone 版 本 ， 不 仅 如 此 ，Cocos2D 被 移植 成 各 个 版 本 ， 形 成 了 庞大 的 Cocos2D 家 族 。 


1.1.1 Cocos2D 的 特点 


Cocos2D 是 一 个 开源 框架 ， 用 于 构建 二 维 游 戏 、 演 示 程 序 和 其 他 图 形 界面 交互 应 用 等 。 它 于 2008 年 2 月 诞生 于 阿根廷 Cordoba 市 附近 的 Los Cocos， 最 早 是 由 Ricardo 和 他 的 朋友 们 用 Python 开 发 的 。 
最 早 引 擎 取 名 自 开 发 地 Los Cocos。 后 来 引擎 的 0.1 版 本 改名 为 Cocos2D。 


2008 年 6 月 ， 该 引擎 宣布 与 ijOS 平 台 对 接 ， 并 在 当月 发 布 了 以 Objective-C 为 主语 言 的 Cocos2D-iPhone 版 本 ， 它 与 最 早 的 Python 版 在 设计 思路 上 是 一 致 的 。 之 后 使 用 Cocos2D-iPhone 开 发 的 首 款 游戏 
StickWarsfEApp store 美国 区 付费 榜 冲 到 第 一 ，Cocos2D 进 入 了 商用 阶段 。 


随 着 App Store 的 发 展 ， 很 多 开发 者 使 用 Cocos2D-iPhone 开 发 游戏 并 将 游戏 提交 到 App Store 上， 截至 2008 年 年 底 ，App Store 就 已 经 有 数 十 款 游戏 使 用 Cocos2D 开 发 。 


随 着 智能 手机 平台 的 发 展 ， 在 其 他 平台 上 的 游戏 开发 需求 也 开始 多 了 起 来 ， 此 时 ，Cocos2D 的 各 种 平台 、 各 种 编程 语言 移植 版 也 开始 涌现 。ShinyCocos、Cocos2D-Android、CocosNet、Cocos2D- 
JavaScript 相 继 诞 生 ，Cocos2D 的 分 支 如 图 1-1 所 示 。 


Cocos2D 
Python 


Cocos2D- 
iPhone 


Cocos2D- Cocos2D- " 97 К Cocos2D 
i ; CocosCairo Cocos2D-X ЯСЕ 
Android Android-1 JavaScript 


ShinyCocos CocosNet 


Cocos2D- Cocos2D- 
XNA НТМІ.5 


81-1 Cocos2D 的 发 展 及 其 分 支 


同时 ， 英 国 的 设计 大 师 Michael Heald 为 Cocos2D 设 计 了 新 的 标志 ， 如 图 1-2 所 示 (最 早 的 Cocos2D 的 标志 (Logo) 是 一 个 奔跑 的 椰子 ) 。 


图 1-2 Michael Heald 为 Cocos2D 设 计 的 标志 


以 下 是 Cocos2D 的 一 些 版 本 介绍 。 
: ShinyCocos: 把 Cocos2D-iPhone 绑 定 Ruby 的 实现 。 
* CocosNet: Cocos2D 的 .NET 实 现 ， 运 行 在 Mono 上 。 
: Cocos2D-Android: Cocos2D 的 Java 实 现 ， 并 且 能 够 在 Android 操 作 系 统 上 运行 。 
Cocos2D-Android1: 此 分 支 由 一 位 国内 资深 开发 者 建立 并 发 展 的 ， 这 是 另 一 个 关于 Android 操 作 系 统 的 Cocos2D 引 掌 实 现 。 
· Cocos2D-X: Cocos2D 的 C++ 语言 移植 版 ， 目 前 2.0 版 本 以 上 支持 Win32 (Windows 32， 视 窗 32 位 操作 系统 ) 、Android、iOS。 
: Cocos2D-XNA: 由 Cocos2D-X 团 队 开发 的 分 支 。 支 持 WP (Windows Phone， 视 窗 手 机 操作 系统 ) o 
: Cocos2D-HTML5: 由 Cocos2D-X 团 队 开 发 的 分 支 。 支 持 HTML5Canvas 技 术 ， 获 得 Google 等 公司 的 资助 。 


Cocos2D-JavaSctipt: Cocos2D 的 JavaScript 语 言 实现 ， 由 于 HIMIL5 技 术 的 发 展 ， 相 信 Cocos2D-JavaScript 会 有 更 广阔 的 前 景 。 


1.1.2 ”Cocos2D 的 主要 功能 


作为 一 款 游戏 引擎 ， 在 游戏 开发 方面 ，Cocos2D3 引 人 擎 具有 很 多 的 实用 功能 。 


首先 它 降 低 了 技术 的 复杂 性 。 它 是 基于 OpenGL (Open Graphics Library， 开 放 图 形 库 ) 和 OpenGL ES (OpenGL for Embedded Systems， 几 入 式 系 统 开放 图 形 库 ) ， 但 是 使 用 Cocos2D 系 列 的 引 
擎 无 须 掌握 OpenGL 的 相关 知识 ， 大 多 数 Cocos2D 游 戏 中 简单 的 图 形 对 象 由 Sprite 精 灵 对 象 生 成 。Sprite 就 是 一 个 贴图 ， 可 以 调用 Cocos2D 中 的 方法 来 实现 图 片 的 缩放 ， 如 图 1-3 所 示 。 


也 可 以 调用 Cocos2D 实 现 旋转 ， 如 图 1-4 所 示 。 


Actions Test 
ScaleTo / ScaleBy 


图 1-3 Cocos2D 实 现 缩放 的 内 容 


Actlons T est 
RotateTo / RotateBy 


MainMenu 


图 1-4 ”Cocos2D 实 现 旋 转 的 内 容 


你 无 须 关 心 这 些 功 能 在 底层 是 如 何 实现 的 ， 同 时 它 是 开源 的 ， 可 以 获得 引擎 的 全 部 源 代码 ， 也 可 以 根据 需要 用 OpenGL 知 识 来 修改 或 生成 新 的 游戏 对 象 。 对 于 入 门 来 说 ，Cocos2D 可 以 避免 你 花费 时 间 
去 研究 OpenGL 的 相关 内 容 ， 同 时 它 也 不 排斥 资深 开发 者 对 引擎 的 修改 ， 可 随心 所 欲 地 使 用 。 


Cocos2D 自 带 的 物理 引擎 可 以 提高 玩家 的 乐趣 ， 目 前 非常 火爆 的 “愤怒 的 小 鸟 ”等 多 款 游戏 都 在 游戏 中 加 入 了 物理 引擎 ，Cocos2D 系 列 引擎 集成 了 目前 比较 流行 的 两 款 物理 引擎 Box2D 和 Chipmunk，， 


从 而 大 大 方便 了 游戏 开发 者 ， 并 且 提 高 了 开发 的 效率 。Cocos2D 中 使 用 物理 引擎 的 例子 如 图 1-5 和 图 1-6 所 示 。 
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1-5 ”Cocos2D 中 使 用 物理 引擎 Chipmunk 的 例子 


图 1-6 ”Cocos2D 中 使 用 物理 引擎 Box2D 的 例子 


它 的 开发 者 社区 十 分 活跃 ， 在 开发 过 程 中 如 果 有 问题 ， 很 快 会 得 到 解决 ， 而 且 ， 相 应 的 参考 资料 也 很 多 ， 开 发 者 们 非常 愿意 分 享 他 们 的 经 验 和 知识 。 因 为 是 开源 的 ， 你 的 修改 也 相对 方便 了 许多 ， 在 游 
戏 开发 中 会 有 很 大 的 灵活 性 ,不必 完全 束缚 在 引擎 的 功能 限制 上 ， 对 于 富有 经 验 的 游戏 开发 者 来 说 ， 这 点 十 分 重要 。 


同时 ， 由 于 其 开源 性 和 强大 的 社区 支持 ， 相 应 的 工具 开发 也 非常 活跃 ， 从 最 早 的 粒子 编辑 器 到 动画 编辑 器 ， 目 前 集成 编辑 器 CocosBuilder 已 经 初 见 雏形 并 且 支 持 Cocos2D 和 Cocos2D-X， 触 控 科 技 新 发 
布 的 Cocostudio 也 在 逐步 完善 。 关 于 相关 的 工具 ， 本 书 也 会 在 之 后 的 章节 做 详细 的 介绍 。 


1.1.3 ”Cocos2D 的 应 用 


Cocos2D 作 为 一 个 游戏 引擎 ， 已 经 从 最 早 的 版 本 被 移植 到 很 多 种 语言 和 框架 上 ， 其 中 最 流行 的 包括 支持 iOS 操 作 系 统 的 Cocos2D-iPhone 版 本 ,支持 Android 操 作 系 统 的 Cocos2D-Android 和 Cocos2D- 
Android1， 以 及 可 以 横 跨 两 大 操作 系统 (iOS 和 Android) 的 Cocos2D-X 版 本 ， 当 然 不 能 忽略 有 着 先天 跨 平台 优势 的 Cocos2D-HTML5 版 本 ， 相 信 不 久 的 将 来 Cocos2D 将 会 得 到 更 广泛 的 应 用 。 


当然 ，Cocos2D 最 为 辉煌 的 舞台 就 是 App store， 使 用 Cocos2D-iPhone 和 Cocos2D-X 两 个 版 本 开发 的 游戏 在 App Store 上 占有 着 举足轻重 的 位 置 ， 曾 经 创下 过 很 多 辉煌 的 战绩 。 如 图 1-7 所 示 ， 使 用 
Cocos2D 引 擎 开发 的 游戏 在 Top Paid (付费 应 用 榜 ) 前 9 名 中 占 2 席 ,在 Top Free (免费 应 用 ) 前 12 名 中 占 7 席 ， 并 且 有 占据 两 个 榜 的 第 一 位 的 辉煌 战绩 。 
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图 1-7 ”使 用 Cocos2D 引 擎 开发 的 游戏 


随 着 Cocos2D-HTML5 的 发 布 ， 相 信 将 来 Cocos2D 引 警 会 有 更 大 、 更 好 的 舞台 发 挥 ， 尤 其 是 在 网 页 游戏 方面 ， 而 借助 HTML5 这 个 跨 平台 利器 ，Cocos2D 在 跨 平 台 的 支持 上 将 会 迈 出 更 大 的 一 步 。 


1.2 什么 是 Cocos2D-X 


之 前 已 经 介绍 了 Cocos2D 家 族 ，Cocos2D-X 是 Cocos2D 家 族 的 一 个 重要 分 支 ， 因 为 它 的 跨 平台 特性 ， 开 发 者 编写 一 套 代码 就 可 以 横 跨 Android 和 iOS 两 大 平台 。 从 而 提高 开发 者 的 开发 效率 。 


Cocos2D-X 不 但 具有 跨 平台 的 特性 ， 它 还 保留 了 Cocos2D 的 全 部 特性 ， 这 样 Cocos2D 开 发 者 可 以 很 轻松 地 掌握 Cocos2D-X。 


1.2.1 Cocos2D-X 的 特点 


随 着 智能 设备 平台 的 普及 ， 用 户 数量 的 增多 ， 智 能 平台 的 应 用 ， 尤 其 是 游戏 异常 火爆 ， 从 植物 大 战 僵尸 到 愤怒 的 小 鸟 ， 移 动 平台 游戏 的 开发 进入 了 新 的 阶段 。 但 另 一 方面 平台 的 多 样 性 也 给 开发 者 带 来 
诸多 不 便 ， 怎 样 将 一 款 游戏 发 布 到 多 个 平台 也 是 开发 者 们 一 直 在 探索 的 。 特 别 是 随 着 Android 和 iOS 平 台 的 兴起 ， 开 发 者 有 了 游戏 跨 平 台 的 需求 ， 随 即 Cocos2D-X 分 支 诞 生 ， 其 中 “X” 包 含 两 个 意思 : 一 方 
面 是 C++ 的 文件 扩展 CXX，“X” 标 志 着 该 项 目 是 由 C++ 编写 的 ; 另 一 方面 意味 着 交叉 ， 这 个 开源 项 目标 是 让 用 户 创 建 跨 平 台 的 代码 。Cocos2D-X 是 Cocos2D 框 架 用 C++ 重 写 的 ， 因 为 Android 和 iOS 均 支 
持 C++。Cocos2D-X 具 有 跨 平台 的 特点 ， 再 加 上 Cocos2D 全 球 社区 的 支持 及 Cocos2D 框 架 简单 易学 ， 使 开发 者 十 分 容易 快速 上 手 。 


Cocos2D-X 迅 速成 为 开发 者 的 首选 。 经 过 一 段 时 间 发 展 ， 众 多 开发 者 使 用 Cocos2D-X 开 发 出 了 多 款 游戏 ,包括 捕 鱼 达 人 、 地 铁 总 动员 等 。2012 年 年 初 ， 英 国 设计 大 师 Michael Heald 专 门 为 Cocos2D- 
X 重 新 设计 了 新 的 标志 ， 如 图 1-8 所 示 。 


图 1-8 Michael Heald Сосоѕ20-Х H 85 45 & 


2012 年 年 初 ，Cocos2D-X 团 队 再 次 开发 两 个 分 支 ， 分 别 是 支持 Windows Phone 的 XNA 版 和 支持 HTML5 的 版 ， 后 者 还 得 到 了 Google 公 司 的 赞助 。 在 Zynga 的 帮助 下 ，Cocos2D-X 已 经 研发 绑 定 
JavaScript 的 Cocos2D-X 的 2.0 版 本 。 随 着 Cocos2D 及 其 分 支 的 发 展 ，Cocos2D 会 有 更 多 跨 平台 特性 从 而 可 以 支持 更 多 的 平台 ， 并 且 提 高 开发 者 的 开发 效率 ， 相 信 Cocos2D-X 将 会 更 加 受到 广大 开发 者 的 欢 
迎 。Cocos2D-X 引 人 擎 也 可 以 扩大 其 影响 ， 成 为 全 平台 的 二 维 游戏 引擎 。 


1.2.2 ”Cocos2D-X 的 主要 功能 


Cocos2D-X 继 承 了 Cocos2D 的 全 部 特点 ， 包 括 如 下 内 容 。 

| 流程 控制 : 易于 管理 不 同 场景 之 间 的 流程 控制 。 

ЖА: 快速 而 方便 的 精灵 。 

动作 : 可 组 合 精灵 的 动作 (如 移动 、 旋 转 和 缩放 等 ) ， 使 精灵 动 起 来 。 
特效: 特效 包括 波浪 、 旋 转 和 透镜 等 特性 。 


` 平面 地 图 : 支持 包括 平面 地 图 和 45 度 角 地 图 。 


“ 转换 : 从 一 个 场景 移动 到 另外 一 个 不 同 的 场 最 。 

. 菜单 : 创建 内 部 菜单 。 包 括 主 菜单 和 游戏 菜单 。 

. 文本 演 染 : 支持 文本 演 染 标签 。 

* 文档 : 编程 指南 +API 参 考 + 视 频 教 学 + 很 多 教 你 如 何 使 用 的 简单 测试 例子 。 


. BSD 许 可 : BSD (Berkly Software Distribution， 件 克利 软件 套件 ) 开源 协议 是 一 个 给 予 使 用 者 很 大 自由 的 协议 。 基 本 上 使 用 者 可 以 自由 使 用 ， 修 改 源 代码 ， 也 可 以 将 修改 后 的 代码 作为 开源 或 者 专 有 软 
件 再 发 布 。 


: 基于 OpenGL: 支持 硬件 加 速 。 


图 1-9 所 示 为 国外 网 友 为 Cocos2D-X 制 作 的 广告 ， 说 明了 Cocos2D-X 对 于 iOS 和 Android 两 个 主流 平台 的 支持 。 
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1-9 外 网 友 为 Cocos2D-X 制 作 的 广告 


123 “百花 齐 放 ” 的 辅助 工具 链 


作为 游戏 引擎 ，Cocos2D-X 一 直 因为 相关 工具 链 的 不 完善 而 遭 人 诉 病 ， 实 际 情况 是 大 多 数 的 公司 都 会 为 Cocos2D-X 编 写 自己 的 工具 ， 只 是 工具 往往 是 针对 一 个 项 目 或 者 只 供 内 部 使 用 ， 并 不 是 推广 使 用 
的 ， 因 为 一 个 工具 作为 一 个 公用 软件 使 用 ， 需 要 长 期 对 用 户 体验 进行 优化 ; CocosBuilder 是 第 一 步 ， 这 个 由 Zygna 支 持 的 项 目 一 直 在 Ricardo Quesada 的 领导 下 开发 ， 而 CocosBuilder 也 被 定义 为 Cocos2D 
家 族 的 引擎 官方 首选 工具 ， 但 是 随 着 Ricardo Quesada 离 开 Zygna， 该 官方 工具 也 被 停止 了 ， 目 前 知道 的 是 依然 有 个 别人 在 更 新 并 完善 CocosBuilder。 


触 控 科 技 于 2013 年 3 月 春季 的 开发 者 大 会 后 推出 了 Cocostudio， 这 是 另 一 个 官方 工具 链 ， 它 包括 动画 、 界 面 、 数 据 和 场景 编辑 器 ， 由 于 基于 .NET 和 (C# 开 发 ， 所 以 初期 CocosBuilder 目 前 只 有 Windows 
版 本 ， 历 经 一 年 的 发 展 ，Cocosudio 也 由 最 初 的 运行 中 频繁 崩溃 和 兼容 性 差 ， 发 展 成 为 较 稳定 的 开发 工具 ， 目 前 工具 也 在 进行 Mac 版 的 移植 工作 ， 相 信 在 Cocos2D-X 新 的 版 本 中 Cocostudio 会 占据 更 加 重 
要 的 位 置 ， 图 1-10 为 CocoSudio 的 Logo。 


图 1-10  CocoSudiof Logo 


随 着 引擎 使 用 群体 的 不 断 扩 大 ， 第 三 方 的 工具 链 和 框架 也 不 断 出 现 ， 包 括 支 持 Cocos2D-X 的 粒子 编辑 器 一 一 V-Play 等 ， 以 及 基于 Lua 的 Quick-Cocos2D-X。 可 以 说 ， 由 于 Cocos2D-X 的 开源 性 ， 更 多 
相关 的 工具 和 框架 会 被 中 小 开发 者 所 采纳 ， 进 入 Cocos2D-X 的 开发 门槛 会 越 来 越 低 。 


1.24 ”Cocos2D-X 主 导 的 3.0 时 代 


从 2012 年 年 底 ， 也 就 是 Cocos2D 2.1 版 本 开始 ，Cocos2D 家 族 的 主要 成 员 (Cocos2D-X、Cocos2D-iPhone、Cocos2D-HTML5 以 及 开发 工具 CocosBuilder) 开始 进行 版 本 的 联合 发 布 ， 联 合 版 本 发 
布 标志 着 Cocos2D 的 主流 版 本 函数 接口 的 统一 ， 随 着 Cocos2D-X 的 使 用 者 逐渐 增加 ， 并 且 Cocos2D-X 也 可 以 很 好 地 支持 jiOS 系 统 (很 多 项 目 都 以 iOS 版 本 为 开发 基础 版 本 ， 之 后 再 移植 Android 版 
Æ) ，Cocos2D-iPhone 的 地 位 渐渐 不 像 之 前 这 么 重要 了 ， 在 2013 年 9 月 底 的 CocoaChina 秋 季 开 发 者 大 会 中 ，Cocos2D-X 创 始 人 王 哲 宣布 了 Cocos2D-X 的 3.0 计 划 ， 并 且 Cocos2D 第 一 开发 者 Ricardo 
Quesada 正 式 加 盟 触 控 科技 ， 将 主导 Cocos2D-X 3.0 版 本 的 开发 ， 这 正式 预示 着 Cocos2D-X 取 代 Cocos2D-iPhone 成 为 Cocos2D 最 重要 的 分 支 ， 另 外 Cocos2D 的 最 重要 编辑 器 也 由 CocosBuilder 变 成 了 之 
前 由 触 控 科 技 团 队 主导 开发 的 Cocostudio， 相 比 于 之 前 1.0 版 本 到 2.0 版 本 的 进化 ， 这 次 进化 更 有 跨 时 代 的 价值 。Cocos2D 引 警 家 族 进入 “3.0” 时 代 。 


说 3.0 具 有 跨 时 代 意 义 ， 不 止 是 因为 Cocos2D-X 跨 平台 引擎 成 为 最 主要 的 分 支 ， 还 因为 Cocos2D-X 3.0 对 于 引擎 的 改动 也 是 前 所 未 有 的 ， 大 体 上 就 是 全 面 引 入 C++ 风格 ， 去 除 Objective-C 风 格 ， 并 且 对 
于 代码 的 重新 审核 和 重 构 ， 确 保 了 引擎 在 效率 上 的 显著 提升 ， 在 1.0 到 2.0 的 变化 过 程 中 运行 效率 就 提升 了 不 少 ， 这 次 更 是 重新 审核 并 重 构 了 核心 泻 染 部 分 的 代码 。Cocos2D-X 3.0 的 变化 包括 以 下 方面 。 


. 采用 C++11 标 准 ， 包 括 “auto” 关 键 字 的 加 入 等 。 

移 除 Objective-C 风 格 ， 包 括 “CC” 前 级 的 类 命名 。 

` 新 的 演 染 系统 ， 添 加 全 局 z 轴 坐标 功能 ， 可 以 在 演 染 排序 时 完全 不 受 添加 顺序 的 影响 。 
“ 字体 泻 染 的 重 构 。 

- 全 新 的 事件 分 发 和 注册 方式 ， 注 册 事 件 更 加 方便 。 

- 物理 引擎 和 引擎 更 好 地 结合 ， 在 引擎 中 加 入 物理 相关 的 类 。 

` Lua 绑 定 使 用 体验 的 提升 ， 加 入 使 用 域 以 及 C++ 类 转换 Lua 类 的 工具 。 


总 体 来 说 ， 新 版 的 引擎 无 处 不 体现 着 Cocos2D-X 更 易 用 、 更 高 效 的 理念 ， 也 正 因 为 这 些 比较 大 的 变化 ， 才 有 了 本 书 的 重新 编写 。 


1.2.5 ”Cocos2D-X 的 应 用 


由 于 跨 平台 特性 ，Cocos2D-X 得 到 了 诸多 开发 者 的 喜爱 。 目 前 ，Cocos2D-X 引 警 的 全 球 市 场 渗 透 率 已 达到 30%， 海 内 外 多 家 顶尖 游戏 公司 (如 网 易 、 菲 音 、 热 酷 、 乐 元 素 、 人 人 游戏 、Zynga、 


Gamevil, LINE) 都 有 基于 Cocos2D-X 开 发 的 手 游 产品 。 而 国内 ， 月 收入 过 干 万 的 游戏 中 ，《 我 叫 MT》、《 龙 之 力量 》、《 大 掌 门 》、《 神 仙道 》、《 君 王 2》 等 也 都 是 用 Cocos2D-X3 引 警 开 发 。 目 前 
Cocos2D-X 游 戏 引 擎 的 全 球 占 有 率 为 30%， 排 名 全 球 第 一 。 除 了 占有 率 ，Cocos2D-X 的 游戏 质量 也 在 逐步 提升 。 图 1-11 所 示 为 截至 2013 年 年 底 月 收入 干 万 的 部 分 游戏 清单 ， 其 中 标注 Cocos2D-X 图 标的 游 
戏 为 使 用 Cocos2D-X 开 发 ， 不 仅 如 此 ， 在 各 大 优秀 手 游 评 选中 ，Cocos2D-X 开 发 的 游戏 也 保持 着 半数 以 上 的 席位 。 


| LZ 
COCOS ~ 


9-4... 
COCOS 


cocos " 


图 1-11 截至 2013 年 年 底 月 收入 千 万 的 部 分 游戏 清单 


Cocos2D-X 在 日 韩 手 游 开 发 中 也 占据 着 主要 的 位 置 ， 日 本 手 游 《勇者 斗 恶 龙 仙境 》 和 韩国 角色 扮演 大 作 《 泽 诺 尼 亚 》 都 由 Cocos2D-X 开 发 ， 日 本 的 图 书市 场 还 出 现 了 不 少 Cocos2D-X 图 书 ， 开 发 者 的 
活跃 程度 不 亚 于 中 国 。 图 1-12 为 日 本 开发 者 为 Cocos2D-X 设 计 的 “四 姐妹 ”宣传 图 ， 分 别 为 : Cocos2D-X, Cocos2D-HTML5, Cocos2D-X Lua/JavaScript 脚 本 绑 定 、Cocos3D 扩 展 ， 反 映 日 本 开发 者 对 


该 引擎 的 喜爱 。 


图 1-12 日 本 开发 者 设计 的 Cocos2D- 久 “四 姐妹 ” 


令 人 更 加 意 想不到 的 是 ， 凭 借 着 良好 的 跨 平台 性 ，Cocos2D-X 的 应 用 已 经 不 仅仅 在 游戏 领域 了 ， 前 有 小 米 盒子 界面 开发 采用 Cocos2D-X3 引 | 擎 ， 后 有 新 东方 的 教育 软件 。2012 年 ， 新 东方 在 线 团队 招聘 
了 一 些 iOS 工 程 师 ， 计 划 开 发 一 款 互动 性 较 强 的 幼教 类 产品 。 这 些 工 程 师 中 有 人 曾 接 受过 Cocos2D3 引 | 擎 的 培训 ， 于 是 便 选 择 了 这 款 引 擎 。 随 着 业务 的 增长 ， 他 们 开始 往 Android 平 台 迁 移 ， 这 个 过 程 
中 ，Cocos2D-HTML5 强 大 的 跨 平台 性 让 他 们 十 分 惊喜 ， 在 过 去 的 200 多 天 里 ， 新 东方 在 线 的 工程 师 们 已 经 用 Cocos2D-HTML5 开 发 出 了 150 余 款 产 品 ， 如 此 高 的 开发 效率 让 人 赞叹 ，Cocos2D-HTML5 也 扮 
演 着 重要 的 作用 。 


1.3 Cocos2D-X Cocos2D-iPhoneB SEU: 


Cocos2D-X 与 Cocos2D 的 其 他 版 本 及 Cocos2D-iPhone 版 本 最 大 的 不 同 之 处 就 是 ， 它 并 不 是 单纯 为 某 一 个 平台 而 开发 的 ， 它 的 目的 就 是 为 了 跨 平台 ， 包 括 Cocos2D-X 和 其 分 支 下 的 Cocos2D-HTML5 版 
本 ， 所 以 从 语言 的 选择 上 ，Cocos2D-X 选 择 了 几 大 主流 移动 平台 (Android、iOS 和 Windows) 都 支持 的 C++ 作 为 开发 语言 ， 并 且 在 效率 上 也 有 所 保证 ，Cocos2D-HTML5 版 本 采用 了 HTML5 作 为 跨 平台 的 
选择 ， 使 得 Cocos2D 游 戏 框架 得 以 在 更 多 的 平台 上 使 用 ， 尤 其 是 网 页 平台 。 


由 于 Cocos2D-X 的 跨 平 台 性 ， 它 的 开发 工具 也 体现 出 跨 平 台 的 特性 ， 如 果 使 用 Windows 操 作 系 统 ， 可 以 使 用 Visual studio 进行 开发 ， 也 可 以 使 用 Eclipse 的 C+ + 插件 及 Android 开 发 环境 进行 开发 ; 如 
果 使 用 Linux 操 作 系统 ， 可 以 使 用 Eclipse 的 C++ 插件 及 Android 开 发 环境 进行 开发 ; 如 果 使 用 Mac 系 统 ， 可 以 使 用 Xcode 进 行 开 发 。 当 然 ， 如 果 想 要 编译 出 相应 平台 运行 的 游戏 包 ， 需 要 相应 的 开发 环境 ， 
比如 编译 出 Android 操 作 系统 上 的 APK (Android Package) ， 就 需要 在 Android 的 开发 环境 里 进行 编译 (这 些 内 容 会 在 第 2 章 介 绍 ) ， 但 是 代码 无 须 重 新 修改 ， 这 就 为 开发 提供 了 便捷 性 和 灵活 性 ， 这 点 与 
使 用 Cocos2D-iPhone 相 比 ， 只 是 使 用 Xcode 开发 环境 有 所 不 同 。 


Cocos2D-X 的 另 一 个 利好 优势 就 是 它 的 主力 开发 团队 在 中 国 ， 这 就 为 中 国 的 开发 者 提供 了 不 少 便利 ， 关 于 Cocos2D-X 的 中 文 资料 和 网 站 也 比较 多 ， 而 且 目 前 Cocos2D 的 引擎 分 支 的 主力 开发 者 也 转 入 
了 Cocos2D-X 开 发 ， 这 意味 着 Cocos2D-X 将 取代 Cocos2D-iPhone 成 为 最 重要 的 Cocos2D 分 支 。 


2012 年 6 月 ，Cocos2D 团 队 决 定 开放 Wiki (夏威夷 语 wee Кее wee kee， 是 一 种 多 人 协作 的 写作 工具 ) ， 只 要 是 Cocos2D-X.org 注 册 用 户 ， 就 可 以 编辑 、 修 改 除 了 首页 概述 之 外 的 所 有 Wiki 页 ， 也 可 以 
自己 新 建 条 目 ! 按照 Wikipedia (维基 百科 ) 的 规则 ， 没 有 人 工 审核 ， 修 改 立刻 生效 ， 进 而 可 以 更 加 丰富 Cocos2D-X 的 文档 和 参考 资料 。 


2013 年 年 中 ，Cocos2D-X 官 方 网 站 由 正式 改版 ， 保 持 了 在 3 月 公布 的 代码 仓库 功能 加， 代码 仓库 包括 了 很 多 Cocos2D-X 的 示例 和 工具 ， 更 方便 开发 者 的 查找 ， 该 页 面 截图 如 图 1-13 所 示 。 除 此 之 外 ， 
国内 著名 编程 技术 网 站 CSDN 也 开设 了 Cocos2D-X 的 页 面 Г!, 
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位 ，Cocos2D-X 的 3D 扩 展 被 提 上 日 程 ， 目 前 还 处 在 “可 用 ”但 不 易 用 的 阶段 ， 触 控 科 技 的 “ 捕 鱼 达 人 ”团队 在 “ 捕 鱼 达 人 3” 的 开发 中 也 采用 了 这 个 技术 ， 相 信和 与 Cocos2D-X 和 Cocostudio 一 样 ， 随 着 具 
体 项 目的 应 用 ， 其 3D 功 能 将 越 来 越 完善 ， 未 来 的 Cocos2D-X 可 以 带 来 更 绚丽 的 游戏 效果 。 


[1] http:/ /www.cocos2d-x.otg/ 
[2] http:/ /www.cocos2d-x.org/hub 


[3] http:/ / chukong.csdn.net/ 


14 ”本章 小 结 


本 章 介 绍 Cocos2D 和 Cocos2D-X 的 由 来 、 特 征 和 应 用 ， 你 需要 了 人 解 Cocos2D 的 历史 和 它 的 各 个 分 支 的 由 来 ， 以 及 Cocos2D 框 架 和 Cocos2D-X 的 特点 及 使 用 ， 为 后 面 的 章节 作 准 备 。 从 第 2 章 开 始 ， 将 带 
领 大 家 逐渐 走 入 Cocos2D-X 的 奇妙 世界 。 


第 2 草 ”搭建 跨 平 台 的 开 友 环境 


所 谓 “ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 学 习 Cocos2D-X 的 开发 技巧 ， 首 先 从 搭建 跨 平台 开发 环境 开始 。 
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目前 ，Cocos2D-X 3.0 版 本 在 常用 的 Windows 和 Mac 系 统 上 都 可 以 开发 ， 但 是 需要 说 明 的 是 ，Windows 上 是 无 法 进行 iOS 开 发 的 ， 所 以 如 果 需 要 生成 可 以 在 iOS 上 运行 的 程序 ，Mac 系 统 是 必需 的 ， 另 
处 Android 系 统 的 开发 工具 是 同时 支持 Windows 和 Mac 系 统 的 。 一 个 完整 的 开发 环境 包括 开发 、 编 译 、 链 接 、 运 行 和 调试 等 几 个 部 分 ， 所 以 需要 相应 的 开发 环境 ， 比 如 Win32 环 境 下 的 VS (Visual 
Studio) ，Android 的 开发 环境 Eclipse 和 Android SDK 等 ，iOS 则 需要 Xcode 环境 ， 然 后 使 用 Cocos2D-X 的 模板 编译 出 相应 环境 的 软件 包 。 


一 般 情 况 下 ， 使 用 Cocos2D-X 的 开发 流程 是 : 首先 在 VS 或 者 是 Xcode 进行 开发 调试 ， 之 后 分 别 在 另外 两 个 平台 的 开发 环境 中 编译 生成 相应 的 软件 包 ， 如 果 使 用 脚本 开发 ， 一 般 是 在 文本 编辑 器 编辑 代 
码 ， 然 后 再 用 VS 或 者 是 Xcode 运行 。2014 年 4 月 底 ，Cocos2D-X 引 擎 团队 发 布 了 基于 Eclipse 的 脚本 调试 工具 Cocos 代 码 集成 编辑 环境 ， 可 以 支持 脚本 语言 的 断 点 添加 等 。 


本 章 首先 介绍 安装 引擎 需 要 配置 的 环境 ， 然 后 介绍 新 的 Cocos 代 码 集成 编辑 环境 ， 最 后 介绍 不 同 平台 下 的 编译 环境 以 及 从 程序 入 口 讲 解 如 何 适 配 不 同 屏幕 大 小 等 ， 下 面 我 们 就 开始 搭建 跨 平台 的 开发 环 


2.1 ”Cocos2D-X 的 安装 和 配置 


曾经 在 Cocos2D-X 2.0 时 代 ， 就 有 人 提出 这 样 的 问题 ， “如何 安 装 Cocos2D-X”， 那 时 来 看 ， 提 出 这 种 问题 应 该 是 还 不 了 解 Cocos2D-X 是 什么 ，Cocos2D-X 是 一 套 程序 框架 ， 本 身 就 是 代码 ， 其 实 本 
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质 上 是 不 需要 任何 安装 过 程 的 ， 但 是 在 3.0 版 本 中 由 于 Cocos2D-X 提 供 了 很 多 方便 我 们 操作 的 Python 脚本 ， 这 些 脚本 简化 了 操作 ， 但 是 需要 配置 一 些 东 西 来 确保 脚本 的 运行 ， 所 以 这 一 节 可 以 理解 为 介 
绍 “ 如 何 安装 Cocos2D-X”。 但 实际 上 ， 它 是 帮助 你 进行 相关 工具 需要 的 配置 ， 本 节 在 介绍 这 些 工具 运行 的 同时 ， 也 会 讲解 这 些 工具 实际 为 你 做 了 些 什么 。 


2.1.1 ”Cocos2D-X 的 运行 编译 环境 


由 于 Cocos2D-X 是 跨 平台 的 ， 因 此 它 需 要 的 运行 环境 也 是 分 跨 平台 介绍 的 。 
. Android 2.3 版 本 或 者 以 上 。 

: iOS 5.0 版 本 或 者 以 上 。 

-OSX (Mac) 10.7 版 本 或 者 以 上 。 

: Linux Ubuntu 12.04 或 以 上 。 

- Windows XP 或 者 以 上 。 


编译 环境 需要 Xcode 4.6 及 以 上 (iOS 或 Mac) , GCC 4.7 及 以 上 或 者 是 Visual Studio 2012 及 以 上 。 


2.1.2 ”需要 安装 或 配置 的 工具 


首先 需要 下 载 Cocos2D-X 引 警 ， 下 载 地 址 为 http://www.Cocos2D-X.org/download， 本 书 成 书 之 时 的 最 新 版 本 为 3.0。 


然后 是 配置 Python 环境 ， 需 要 2.7.3 版 本 。 为 什么 需要 Python 环境 ， 这 是 为 了 让 开发 工具 可 以 跨 平 台 ， 很 多 功能 都 是 用 Python 脚本 开发 的 ， 比 如 创建 跨 平台 项 目 ，Windows 需 要 到 Python 官网 下 载 ， 
在 “我 的 电脑 /系统 属性 /高 级 /环境 变量 /系统 变量 ”中 配置 Python 环境 变量 。 在 PATH 的 值 后 面 追 加 “;cNpython” (python 的 安装 路 径 ， 和 你 安装 时 设置 的 路 径 相关 ， 记 得 加 上 分 号 “;”) ， 与 前 面 的 值 
分 隔 开 ， 上 述 环境 变量 设置 成 功 之 后 ， 就 可 以 在 命令 行 直接 使 用 Python 命令 ， 或 执行 “python*.py” 运行 Python 脚本 。 此 时 ， 还 是 只 能 通过 “pythonx.py” 运行 Python 脚本 ， 若 希望 直接 运行 “*.py 
打开 另 一 个 环境 变量 PATHEXT， 在 值 后 面 加 “;.PY;.PYM” 就 可 以 了 。 


配置 这 些 就 可 以 在 控制 台中 运行 Cocos2D-X3 引 擎 目录 下 的 “setup.py”， 就 可 以 “安装 ”Cocos2D-X 了 ， 运 行 “setup.py” 时 会 让 你 输入 一 些 工具 的 路 径 ， 现 在 先 跳 过 这 个 过 程 ， 具 体会 在 2.4 节 中 讲 
解 ， 其 实 这 个 脚本 是 让 你 可 以 在 控制 台中 直接 运行 “cocos new” 创 建 项 目 ， 如 图 2-1 所 示 。 


Runing command: new 
Copy template into /Users/manshuoquan/example1-1/MyCppGame 
Copying cocoszd-x files... 
Rename project name from 'HelloCpp' to 'MyCppGame ' 


Replace the project package name from 'org.cocos2dx.hellocpp' to 'com.hzbook' 


т> 
= 
E 
> Replace the project name from 'HelloCpp' to 'MyCppGame "' 
2 
manmatoMacBook-Pro:- manshuoquan$ D 


图 2-1 “cocos new” 创 建 项 目 


命令 的 参数 说 明 : 


--h: 才 助 。 


“ -Pp: 包 名 。 


: -]: 语言 ， 可 选 的 是 C++ 和 Lua。 
|-d: 工程 目录 。 
=ч: (可 选 的 ) 项 目 模板 名 ， 不 写 就 是 默认 模板 。 


创建 好 的 工程 目录 如 图 2-2 所 示 。 


> LJ Classes 
. CMakeLists.txt 
ЕВ cocoszd 
proj.android 


LJ proj.ios mac 
LJ proj.linux 
上 proj.win32 
Resources 


图 2-2 Cocos2D-X L4 B Ж 
: Classes: C++ 文件 目录 。 
cocos2d: 引擎 库 目 录 。 
“ proj 系 列 : 不 同 平台 下 工程 目录 。 


: Resources: 资源 目录 ,图片 、 声 音 以 及 脚本 。 


22 ”Cocos2D-X 代 码 集成 调试 工具 Cocos Code IDE 


作为 代码 框架 出 现 的 游戏 引擎 Cocos2D-X， 此 前 一 直 没 有 像 Unity3D 一 样 的 集成 的 开发 环境 ， 由 于 C++ 代码 无 论 在 Windows 平 台 上 使 用 VS， 还 是 在 Mac 平 台 上 使 用 Xcode， 调 试 都 相对 方 
便 ，Cocos2D-X 又 是 开放 源 代码 的 ， 所 以 不 需要 像 Unity3D 一 样 做 成 一 个 开发 软件 ， 但 是 使 用 脚本 开发 游戏 时 ， 往 往 因 为 没有 代码 提示 和 无 法 添加 断 点 等 ， 给 开发 造成 麻烦 。 "Cocos Code IDE” 作 为 基 
于 Ecipse 的 跨 平台 编辑 器 ， 专 门 为 Lua 或 者 Javascript 脚 本 开发 人 员 准备 ， 使 用 此 工具 可 以 方便 地 创建 游戏 工程 、 编 写 并 且 调试 代码 、 实 时 查看 代码 改变 后 的 效果 ， 最 终 直接 发 布 成 一 个 安装 包 。 


2.2.1 安装 和 配置 


1) 下 载 工具 ， 下 载 和 文档 的 地 址 是 https://github.com/chukong/cocos-docs/blob/master/manual/studio/cocos-code-ide/getting-started/zh.md， 注 意 本 书 成 书 之 时 发 布 的 是 工具 的 beta 版 ， 
目前 已 经 实现 的 功能 包括 : 创建 工程 、 脚 本 代码 提示 、 调 试 、Android 的 apk 文 件 打 包 ， 暂 未 实现 的 是 iOS 的 ijpa 文 件 打包 以 及 与 CocoStudio 的 集成 ，Window 支 持 Windows 7 和 Windows 8 系统 ，Mac 支 持 
10.7 以 上 的 系统 (10.9 是 测试 时 使 用 的 系统 ，10.7 上 也 可 以 运行 ) 。 


2) Cocos Code IDE 因 为 Ecipse 是 基于 Java 运 行 ， 所 以 需要 下 载 配 置 JjDK (Java Development Kit) ， 地 址 是 www.oracle.com/technetwork/java/javase/downloads/index.html， 直 接 下 载 最 新 版 
本 就 可 以 。Windows 需 要 配置 环境 变量 ， 配 置 方式 和 Python 类 似 ， 添 加 变量 名 "ЈАМА НОМЕ" (JDK 路 径 ) ， 然 后 需要 “PATH” 变量 ， 点 击 编辑 在 最 后 加 
A “%JAVA HOME%\bin;%JAVA HOME%\jre\bin;”" 新建 “CLASSPATH” 变量 赋值 “9JAVA_HOME9%eNlib;9JAVA_HOME9%eNlib\toolsjar”， 另 外 需要 安装 和 配置 Python 环境 ， 这 个 环境 的 配置 已 经 在 


2.1.2 节 介绍 过 ， 这 里 不 再 袭 述 。 


3) 最 后 解压 后 点 击 图 标 运行 ， 效 果 如 图 2-3 所 示 ， 操 作 和 我 们 熟悉 的 Eclipse 类 似 。 
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图 2-3 Cocos Code IDE 启 动 界 面 


2.2.2 ФЕСосоѕ Code IDE 中 调试 代码 


启动 后 ， 欢 迎 界面 如 图 2-4 所 示 。 


Welcome to Cocos Code IDE 


JavaScript Lua 
Develop javascript games based on Cocos2D-JS engine. Develop lua games based on Cocos2D-X engine. 


图 2-4 Cocos Code IDE і Ж-ү] 


р ЈауаЅсгірівў Lua, 2 Сосоѕ Code IDE 点 击 你 所 偏好 的 设置 ， 就 可 以 进入 配置 Cocos2D-X 路 径 的 界面 ， 在 JavaScript 的 路 径 下 输入 Cocos2D-JS (第 12 章 会 详细 介绍 ) 的 路 径 ， 在 Lua 路 径 
下 输入 Cocos2D-X 路 径 便 可 以 完成 配置 ， 如 图 2-5 所 示 。 


( type filter text у JavaScript 


b General 
'" Cocos Cocos JavaScript Setting 


JavaScript Framework: | /Users/manshuoquan/Documents/develop/cocos2d-js | Browse... | 
и 


* Debug 
Easy Shell 
> Help 
* Install/Update 
P JavaScript 
ша 
> Mylyn 
> Run/Debug 
в Team 
b Test 


Please, setting cocos2d-x engine path for JavaScript. 


| Restore Defaults | Apply 


图 2-5 配置 引 掌 路 径 


两 个 路 径 都 配置 好 就 可 以 在 新 建 项 目 中 选择 Lua 和 Javascript 项 目 了 ， 之 前 需要 选择 相关 视窗 ， 点 击 Lua 视 窗 就 可 以 新 建 Lua 项 目 ， 如 图 2-6 所 示 。 


Open File... r3 Project... 


Close 
Close All СУ Folder 


Save 
5| Save As... | 
* Save All ses | r3 Other... 
Revert icon to exit t 


图 2-6 HENE 


在 代码 编辑 部 分 编辑 代码 ， 就 可 以 看 到 代码 提示 了 ， 如 图 2-7 所 示 。 


local visibleSize = cc.Director:getInstance():getVisibleSize() 
local origin = cc.Director:getInstance():getVisibleOrigin(C) 
local testSp = cc.Spri| _ 


一 一 add +һе moving X EE - Sprite 
local function cre a — Е 


local frameWid 2 SPRITE INDEX, NOT. INITIALIZED : £int 


local #гатеНей , spriteBatchNode : SpriteBatchNode#SpriteBat 


-- create dog å SPRITEBATCHNODE RENDER SUBPIXEL : sint 
local textureD ê SpriteFrame : SpriteFramesSpriteFrame 
local rect = c а SpriteFrameCache : SpriteFrameCache£SpriteF: 
local frame? 


rect = cc.rect 
local framei 


图 2-7 ”Lua 代码 提示 
需要 说 明 的 是 ， 在 本 书 成 书 之 时 的 最 新 版 本 (Beta 版 ) 中 ，JavaScript 的 代码 提示 还 不 是 很 完善 ， 看 看 后 续 的 版 本 能 否 有 所 改善 。 
注意 引擎 和 所 创建 的 工程 所 在 的 路 径 都 不 能 包含 非 英 文字 符 ， 即 路 径 中 不 能 包含 中 文 。 另 外 引擎 版 本 一 定 要 选择 3.0 以 上 。 
选择 项 目 “ 右 键 单 击 一 Debug As 一 Debug Configurations” 可 以 配置 相关 运行 配置 ， 如 图 2-8 所 示 。 


首先 需要 在 Runtime path 中 选择 一 个 已 经 被 编译 好 的 文件 ， 这 样 在 运行 时 就 可 以 找到 脚本 的 运行 程序 了 。 如 果 需 要 在 真 机 上 运行 ， 就 可 以 在 “Device IP” 中 输入 设备 IP， 应 用 包 就 可 以 直接 安装 在 真 
机 上 进入 调试 了 ，Debug 模 式 界 面 如 图 2-9 所 示 。 


| [1 B х 23 Fer .| Name: | New configuration 
( type filter text MW 
$ Cocos JSBinding 
тў. Cocos Luabinding Q Android 
New configuration m 

| | Use Adb Mode 
Runtime path: runtime /android jPrebuiltRun timelu a.apk 
Device IP: 
Package Name: ^ org.cocos2dx.PrebuiltRuntimelua 
Launch Activity: org.cocos?dx.lua.AppActivity 

(*) IOS 
МЇ Use iOS Simulator 
Device IP: m 
Runtime path: runtime/ios/PrebuiltRuntimeLua.app ——— — 

( ) Mac 


Runtime path: — runtime/mac/PrebuiltRuntimeLua.app | Browse... ] 


Con nection properties 


IDE key: m 
Timeout(s) 


Filter matched 3 of 3 items 


图 2-8 运行 配置 


| | ES Зер 全 Javascript ©) Lua 


35 Debug 22 | > Breakpmaints X Expressions ЭЕ] interactive Console Жы ч: Ed 


resourca.js E app.]s H = \ш c* Outline 23 
E F ggo с MENU LECM Wi tP age AALEN 15 CLICKEO ED guilt rri гат > ë 
you may modify it | TT 二 Wow ө ы | 
J£ ask director the window size HelloWorld Layer : He lloWorldLayer 
маг siz& = cc.directar.getWintize(); isMauseDeown : Boolean 
hellaimg : any 
hellaLabel : 101 


// add a "clase" icon to exit the progress, 1+#! 
var closeltem = cc.MenultemlImagr.creute( ш 
res. CloseMormel, pna, мыш 
rEs.CloseSelecked png, E SN 
function Су { 6 скі 
ec.leg("Menu is elieked!"): , He Пом сее * HelloWorldScene 
1.157; Ф ыпЕп{ег{} 
tCloseltem.uttr(4i > Layer: Layer 
x: &iz&.widkth = 20, 
y: 20, 


= an пишт] caser object 


scene. SCEME 


Е Console E 1 Tasks 


No consoles to display at this tme. 


| тагт Insert 


2-9 ”Debug 模式 界面 


2.3 ”搭建 Windows 开 友 环 境 

搭建 Windows 下 的 Cocos2D-X 开 发 环境 ， 首 先 需 要 安装 VS。VS 是 微软 公司 推出 的 集成 开发 环境 ， 是 目前 Windows 平 台 上 最 流行 的 开发 环境 ， 它 可 以 用 来 创建 Windows 平 台 下 的 Windows 应 用 程序 、 
网 络 应 用 以 及 网 络 服务 等 ， 支 持 的 语言 包括 C++、Basic、C# 等 ，Cocos2D-X 框 架 支 持 的 VS 版 本 包括 VS2012、VS2013。 本 书 选择 的 开发 环境 是 VS2013。 

首先 ， 从 微软 官方 网 站 下 载 VS (VS 是 一 款 收费 软件 ) ， 然 后 双击 安装 文件 ， 便 可 以 开始 安装 ， 上 默认 安装 即 可 ， 如 果 是 自 定义 安装 ， 应 选中 Visual C++ 组 件 。 


VS 安装 好 之 后 ，Cocos2D-X 的 Windows 开 发 环境 就 搭建 完成 了 ， 如 果 需 要 提高 开发 效率 ， 可 以 安装 Visual Assist X。 这 是 一 款 非常 不 错 的 VS 插件 ， 具 有 强大 的 编辑 特色 ， 提 高 了 生产 效率 ， 可 以 完全 
集成 到 Microsoft 开 发 环境 中 ， 起 到 升级 集成 开发 环境 的 效果 ， 在 不 改变 编程 习惯 的 同时 就 可 以 感受 到 Visual Assist X 带 来 的 好 处 。 


简 而 言 之 ，Visual Assist X 可 以 在 编程 时 给 我 们 提示 ， 比 如 某 个 类 别 都 有 什么 方法 ， 还 可 以 进行 语法 检查 等 。 注 意 ，Visual Assist X 也 是 收费 的 ， 同 样 需要 注册 。 
在 Windows 的 VS 环境 下 安装 Cocos2D-X 框 架 ， 需 要 如 下 几 个 步骤 。 

1) 在 微软 VS 官网 上 下 载 (地 址 为 http://www.visualstudio.com) 。 

2) 双击 引擎 目录 build 下 的 .sln (文件 扩展 名 ) Xt, BU "cocos2d-win32.vc2012.sln" ， 打 开 文 件 同时 也 启动 了 相应 的 VS 工具 。 


3) 点 击 鼠 标 右键 选中 项 目 ， 选 择 如 图 2-10 所 示 的 选项 ， 将 项 目 设 置 为 启动 项 。 
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2-10 在 VS 中 将 项 目 设置 为 启动 项 


4) 这 时 可 以 右键 单 击 项 目 选 择 构建 项 目 ， 即 生成 按钮 来 构建 整个 Cocos2D-X 的 项 目 ， 也 可 以 直接 单 击 调试 ( 即 Debug) 运行 cpp-empty-test 项 目 ， 效 果 如 图 2-11 所 示 。 


图 2-11 HelloWorld 运 行 效果 


24 Android F RINA 
Android 本 意 是 “机 器 人 ”， 它 是 Google 公 司 推出 的 开源 手机 操作 系统 ，Android 基 于 Linux 操 作 系统 ， 由 操作 系统 、 中 间 件 、 用 户 界面 和 应 用 软件 组 成 ， 号 称 首 个 为 移动 终端 打造 的 真正 开放 和 完整 的 
移动 软件 。 


在 Android 最 早 发 布 时 ，Google 公 司 官方 将 Java 语 言 作为 第 三 方 应 用 的 开发 语言 ， 但 是 也 没有 完全 拒绝 C 语 言 的 开发 人 员 进 行 开发 ， 因 为 在 Android 发 布 初期 ，Google 就 表明 其 虚拟 机 支持 JNI (Java 
Native Interface，Java 本 地 调用 ) ， 也 就 是 第 三 方 可 以 通过 JNI 调 用 自己 的 C 动 态 库 ， 但 是 最 早 Google 并 未 为 这 种 方式 提供 相应 的 工具 ， 以 支持 这 种 开发 方式 ， 直 到 2009 年 6 月 ，Google Android 方 面 发 布 
了 NDK (Native Develop Kit， 原 生态 本 地 开发 包 ) ， 它 支持 开发 者 使 用 C/C++ 语言 开发 Android 程 序 。 


Android NDK 作 为 Android SDK 的 一 个 附加 组 件 提供 给 开发 者 ， 也 就 是 说 ， 开 发 者 必须 同时 安装 SDK 和 NDK。NDK 只 是 作为 SDK 的 一 个 补充 ， 增 加 了 代码 的 重用 性 和 程序 的 运行 效率 ， 并 且 使 
C/C++ 程序 员 也 可 以 加 入 到 Android 的 开发 中 。 本 书 成 书 之 时 NDK 的 最 新 版 本 更 新 到 android-ndk-r9， 本 书 也 是 使 用 这 个 版 本 进行 开发 ， 需 要 说 明 的 是 ，android-ndk-r9b 版 本 是 更 加 合适 Cocos2D-X 3.0 
的 NDK 版 本 ， 在 官网 上 找 不 到 它 的 下 载 链接 ， 可 以 复制 最 新 的 下 载 链接 ， 把 版 本 改 成 android-ndk-r9b 就 可 以 直接 下 载 了 。 


正 因为 Android 支 持 C/C++ 的 开发 ，Cocos2D-X 才 选择 了 C++ 作 为 主要 的 开发 语言 ， 因 为 OS 开发 不 支持 Java 语 言 ， 所 以 跨 平 台 的 Cocos2D-X 选 择 了 支持 两 个 平台 的 C++ 作 为 主要 的 开发 语言 ， 因 此 配 
置 Cocos2D-X 环 境 需 要 如 下 的 开发 工具 。 


ЛӘК: Java 开 发 工具 (Java Development Kit) o 
ADT: Android Eclipse 集 成 开发 工具 ( 即 Android 开 发 工具 ) 。 其 中 包括 Eclipse、CDT (C++ 开发 的 Eclipse 播 件 ， 即 Andtoid 开 发 插件 ) VA Android SDK (Android 开 发 工具 ， 包 括 模 拟 器 等 ) o 
: Android NDK: Android 原 生态 本 地 开发 包 ， 辅 助 SDK 进 行 编译 开发 ， 支 持 C/C+++。 


使 用 Cocos2D-X 进 行 Android 开 发 需要 上 述 工 具 ， 本 节 就 开始 介绍 如 何 使 用 这 个 环境 来 搭建 Cocos2D-X 的 Android 开 发 环境 。 


2.4.1 ”编译 和 运行 


与 Cocos2D-X 的 Win 32 环 境 下 的 软件 开发 与 配置 相 比 ，Android 的 环境 配置 要 相对 麻烦 些 ， 因 为 要 包括 Android 开 发 环境 的 搭建 ，Android NDK 开 发 环境 的 搭建 ， 配 置 及 Cocos2D-X 的 编译 运行 等 。 


1) 由 于 运行 Android 的 模拟 器 和 Eclipse 等 需要 Java 的 JDK 环 境 ， 所 以 需要 下 载 并 安装 JDK。JDK 的 下 载 地 址 为 http://www.oracle.com/technetwork/java/javase/downloads/index.html。 下 载 的 文 
件 直 接 运行 安装 即 可 。 Eclipse 无 须 安装 ， 直 接 解压 完成 便 可 使 用 。 


2) 下 载 并 安装 ADT。 


ADT 其 实 就 是 Eclipse 的 Android 扩 展 版 本 ， 包 括 基础 的 Eclipse 以 及 配置 好 Android 的 SDK 等 ， 它 的 下 载 地 址 是 developerandroid.com/sdkVindex.html。ADT 无 须 安 装 ， 直 接 解压 完成 便 可 使 用 ， 启 动 
界面 如 图 2-12 所 示 。 


ANDROID 


DEVELOPER 


图 2-12 ” ADT 启动 界面 
3) 安装 和 配置 Android 的 NDK 工 具 。 


NDK 最 新 版 本 为 r9， 建 议 使 用 r9b 版 本 ， 最 新 版 本 的 NDK 工 具 下 载 地 址 为 http://dl.google.com/android/ndk/android-ndk-r9b-darwin-x86 64.tar.bz2。 将 NDK 解 压 到 某 一 目录 下 ， 然 后 设置 选项 ， 
弹出 如 图 2-13 所 示 的 对 话 框 ， 在 NDK Location 中 输入 NDK 的 地 址 ， 点 击 Apply 按 钮 并 确定 ， 完 成 NDK 的 配置 。 


type filter text _ NDK 


P General | 
"Android Android NDK Preferences 
Build 
DDMS 
Editors 
Launch 
Lint Error Checking 
b Logat 
NDK 
Usage 5tats 
Р Ant 
C/C++ 
* Help 
Б Install/Update 
> Java 
*Run/Debug 
* Team 
Validation 
P XML 


Browse... 


NDK Location JUsers/ m anshucquan/develop/An d roid / а | 


А Restore Defaults | | Apply 


. Cae | E 


图 2-13 NDK 的 配置 页 面 
4) 了 解 编译 命令 。 


Android 项 目的 编译 运行 比较 复杂 ， 在 之 前 的 版 本 中 ，Windows 上 面 还 需要 安装 额外 的 工具 才能 编译 ， 在 3.0 版 本 添加 了 很 多 用 Python 写 的 工具 来 简化 这 个 过 程 ， 之 前 2.1 节 中 已 经 介绍 了 “cocos 


new" ， 这 步 需 要 了 解 编译 命令 “cocos complie” 和 运行 目录 “cocos run”。 首 先 在 运行 “setup.py” 时 会 需要 配置 一 些 环 境 变量 ， 这 些 工 具 如 下 。 
: COCOS_CONSOLE_ROOT: cocos 控 制 台 路 径 ， 控 制 台 用 于 新 建 、 构 建 、 发 行 工程 。 
: NDK, ROOT: Android NDK 根 目录 。 
- ANDROID SDK, ROOT: Android SDK 根 目录 。 
: ANT ROOT: АМТЖ Я $. 


其 中 ，Ant 工 具 是 为 了 自动 构建 Android 程 序 用 的 。Ant 是 一 种 基于 Java 的 构建 工具 。 理 论 上 来 说 ， 它 有 些 类 似 于 UNIX 中 编译 C 文 件 时 的 make 文 件 ， 但 没有 make 的 缺陷 。 它 的 下 载 地 址 是 
http://ant.apache.org/bindownload.cgi， 由 于 基于 Java， 它 也 是 跨 平台 的 ， 下 载 后 解压 到 所 需 目录 就 可 以 了 。 以 上 提 到 的 四 个 目录 中 ，“COCOS_CONSOLE_ROOT” 是 不 需要 配置 的 ， 因 为 它 是 和 
Cocos2D-X 目 录 相 关 的 ， 其 余 的 目录 设置 后 ， 就 可 以 完成 “setup.py” 的 配置 了 ， 然 后 重启 控制 台 ， 就 可 以 进入 你 的 工程 目录 下 ,调用 “cocos complie” 和 “cocos run” 编 译 或 运行 项 目 。 需 要 注意 的 
是 ，“cocos run” 也 会 调用 “cocos complie” 提 示 编 译 成 功 (说 明 编 译 完成 了 ) ， 如 果 你 的 程序 有 错误 ， 会 提示 编译 失败 并 报错 。 


5) 在 ADT 中 导入 并 运行 项 目 。 


选择 File 一 New 一 project 命 令 ， 在 弹出 的 界面 (如 图 2-14 所 示 ) 中 选择 Existing Android Code Into Workspace, 


т [= General 

(È Archive File 

[这 Existing Projects into Workspace 

Е File System 

— Preferences 
* (= Android 

25 Existing Android Code Into Workspace 
b Ey C/C++ 


b (—- Install 

> = Run/ Debug 
> i Team 

P [> XML 


Finish 


2-14 3r XE Android H 3i 4£ Existing Android Code Into Workspace 


选择 项 目 路 径 下 的 proj.android 路 径 (之 前 的 版 本 是 Android 文 件 夹 ) 选中 并 新 建文 件 ， 如 图 2-15 所 示 。 


Select a directory to search for existing Android projects 


Root Directory: | /Users/ mans hunoquan/Documents /develop/example7- 1 / | Browse... | 


Projects: 
[VI Cocos2dxActivity (/Users/manshuoquan/Documents / develop /example | Select All - um - 


Refresh | 


| ) Copy projects into workspace 
Working sets 


| | Add project to working sets 


Working sets: | | Select... 


图 2-15 ”导入 Android 项 目 


另外 还 需要 从 引 敬 目录 下 的 “cocos/2d/platform/android/java” 路 径 中 导入 引擎 基础 Android 库 ， 这 些 库 文件 如 图 2-16 所 示 。 


Y [© јама 
» E Android 3.2 
P к Android Dependencies 
т (3E src 
t& org 
[B org.cocos2d x 
Y ВВ org.cocos2dx.lib 
> [J] Cocos2dxBitmap.java 
> |J] Cocos2dxEditBoxDialog.java 
> |J] Cocos2dxEditText.java 
> [J] Cocos2dxHelper.java 
b П Cocos2dxLocalStorage.java 
> [J] Cocos2dxLuaJavaBridge.java 
> [J] Cocos2dxMusic.java 
> [J] Cocos2dxSound.java 
> П Cocos2dxTypefaces.java 


图 2-16 Ссосо20-Х #9 Android R- 


在 项 目 上 右键 点 击 “Run As” 或 者 运行 配置 便 可 以 运行 项 目 ， 如 图 2-17 所 示 。 


Hello Worla 


图 2-17 项 目 在 Android 上 的 运行 效果 


24.2 ”Cocos2D-X 的 工程 目录 介绍 


Cocos2D-X 在 Android 平 台 上 的 工程 项 目 与 Android 的 Application 一 致 ， 而 且 它 的 目录 变化 是 比较 小 的 ， 如 图 2-18 所 示 。 


т [2 Cocos2 dxActivity 

P =} Android 3.2 

> =) Android Dependencies 

> (288 src 

p 218 gen [Generated Java Files] 
25, assets 


bin 


немам 
(extensions 

P iz jn 

b iz res 

Дъ scripting 

da AndroidManifest.xm! 
三 | ant.properties 

ҮЙ build . native.py 

Bl build-cfg.json 

Rj build.xml 

| proguard-project.txt 


3) project.properties 
E README.md 


图 2-18 | Cocos2D-X f] Android E Е Ж 


下 面 就 来 看 一 下 Cocos2D-X 的 Android 项 目 中 的 目录 。 
stc: Java 源 文件 的 目录 ， 由 于 Android 项 目的 入 口 类 都 是 Activity， 所 以 这 里 包括 Activity、 事 件 捕 扣 在 内 的 Java 实 现 的 程序 。 
© реп: 自动 生成 的 R.java、BuildConfig.java 等 文件 。 


assets: 资源 文件 。 


: bin: APK 包 文件 等 配置 文件 。 

. jni: 包括 编译 时 使 用 的 .mk 文件 等 。 
.libs: 库 文件 ， 包 括 .so 文件 等 。 

. obj: 包括 部 分 .so 文件 和 .o 文 件 等 。 
res: XML 等 配置 文件 。 


这 里 需要 说 明 的 有 两 个 文件 ， 这 两 个 文件 是 我 们 有 可 能 修改 的 ， 首 先是 工程 目录 中 jni 下 的 Application.mk， 见 代码 清单 2-1。 


代码 清单 2-1 Application.mk 文 件 


APP STL := gnustl static 
APP CPPFLAGS := -frtti -DCC ENABLE CHIPMUNK INTEGRATION-1 -DCOCOS2D DEBUG=] 
-std=c++11 -fsigned-char 


这 里 定义 了 编译 变量 ， 比 如 DCC_ENABLE_ CHIPMUNK _INTEGRATION 意 味 着 开启 Chipmunk 物 理 引 警 。 


编译 文件 主要 根据 jni 目 录 下 的 Android.mk 文 件 ， 见 代码 清单 2-2。 


代码 清单 2-2 ” Android.mk 文 件 


# 

必须 以 LOCAL PATH 

开头 ， 定 位 源 文件 

LOCAL PATH := $(call my-dir) 
include $(CLEAR VARS) 


# 

模块 名 称 ， 必 须 是 唯一 的 
LOCAL MODULE := cocos2dcpp shared 
LOCAL MODULE FILENAME := libcocos2dcpp 
LOCAL SRC FILES := hellocpp/main.cpp \ 


http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/../http://www.hzcourse.com/resource/readBook?path-/openr 
http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/../http://www.hzcourse.com/resource/readBook?path-/openr 
1C 
X 件 
LOCAL C INCLUDES := $ (LOCAL PATH)/http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/../http://www.hzcourse.com/resource/re 
# 
动态 库 文件 


OCAL WHOLE STATIC LIBRARIES := cocos2dx static 
LOCAL WHOLE STATIC LIBRARIES += cocosdenshion static 
LOCAL WHOLE STATIC LIBRARIES += box2d static 

d U HARED L H 


include $(BUILD SHARE BRARY) 


# 

找到 其 他 模块 的 mk 

文件 

$(call import-module, 2d) 

5 (call import-module, audio/android) 
$ (call import-module,Box2D) 


其 中 LOCAL_SRC_FILES 变 量 包含 一 系列 将 被 构建 和 组 成 的 C+ + 文件 ， 默 认 扩 展 名 是 “cpp”， 新 添加 的 C+ + 文件 都 要 添加 在 这 里 ， 也 可 以 一 劳 永 逸 地 把 这 句 改 成 如 代码 清单 2-3 所 示 。 


代码 清单 2-3 修改 mk 文件 


E 


声明 变量 OUR_CPP PATH 
代表 C++ ` 

源码 目录 

OUR CPP PATH := $ (LOCAL PATH) / 


# 
获取 目录 下 的 所 有 文件 
OUR А11 Files := $ (shell find $(OUR CPP PATH)/.) 

OUR All Files :=$ (Му А11 Files:$(OUR CPP PATH)/./$-$(OUR CPP РАТН) %) 
T 
从 My All Files 
中 提取 所 有 的 C++ 


X Ty 

这 里 也 可 以 使 用 filter 
OUR CPP LIST := $ 
OUR CPP LIST :- $ 
LOCAL SRC FILES : 


(foreach c file,$(OUR All Files), $(wildcard $ (с file)/*.cpp) ) 
(OUR CPP LIST:$(LOCAL PATH) /%=%) 
= $(OUR CPP LIST) 


这 个 文件 还 不 足以 扫描 所 有 目录 下 文件 ， 见 代码 清单 2-4 所 示 。 


代码 清单 2-4 ”修改 mk 文件 ， 可 以 扫描 目录 下 所 有 文件 


# 

扫描 目录 下 的 所 有 源 文 件 

MY FILES PATH := $ (LOCAL PATH) \$ (LOCAL PATH)/http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/0EBPS/Text/../http://www.hzcourse.com/ 
MY F 


LES SUFFIX := $.cpp $.c $.cc 


My All Files := $ (foreach src path,$ (МҮ FILES PATH), 5 (shell find "5 (src path)" -type f)) 
My All Files := $ (Му All Files:$(MY CPP РАТН) /./%=$ (МҮ CPP PATH)$£) Е 

MY SRC LIST := $(filter 5 (МҮ FILES SUFFIX),$(My All Files)) 

MY SRC LIST := $(MY SRC LIST:$ (LOCAL PATH) /%=%) 

LOCAL SRC FILES := $(MY SRC LIST) 


2.5 ”搭建 IOS 开 上 友 环 境 

Xcode 是 苹果 公司 向 开发 人 员 提 供 的 集成 开发 环境 ， 用 于 开发 Mac OS 的 应 用 程序 。iOS SDK 是 iOS 系 统 的 开发 工具 ，Xcode 用 于 开发 基于 iOS 的 iPad、iPhone、iPod touch 设 备 应 用 程序 ， 只 要 有 Mac 
OS X Snow Leopard 10.6.2 以 上 版 本 Mac OS 操作 系统 ， 便 可 安装 1OS SDK， 可 以 使 用 iPhone 模拟 器 进行 调试 或 者 使 用 真 机 进行 调试 。 

在 iOS 上 开发 Cocos2D-X 的 应 用 也 要 使 用 Xcode，Xcode 的 安装 文件 下 载 地 址 为 https://developer.apple.comytechnologies/tools/。 

注意 ”下载 之 前 需要 注册 为 苹果 开发 者 ， 下 载 后 双击 DMG 文 件 进行 安装 即 可 。 


想 要 编译 运行 项 目 ， 首 先 将 Cocos2D-X 的 压缩 包 解压 到 某 一 个 目录 下 ， 这 时 便 可 运行 项 目 了 。 


双击 proj.ios 目 录 下 的 iOs 工 程 文 件 ， 用 Xcode 打 开 新 建 的 项 目 ， 然 后 单 击 运行 ，Cocos2D-X 的 初始 空 项 目 便 可 在 iPhone 模拟 器 和 iPad 模 拟 器 上 运行 ， 如 图 2-19 和 图 2-20 所 示 。 


їй ДХ. 


图 2-19 ”HellowWorld 在 iPhone 模拟 器 上 的 运行 效果 


105 模拟 器 - iPad / 105 5.0 (8A334) 


ы ari 


Hello World 


ГОП? 


图 2-20 ”HelloWorld 在 iPad 模 拟 器 上 的 运行 效果 


Cocos2D-X 可 以 在 Visual Studio, ADT (BBEclipse) 和 Xcode 三 大 开发 工具 中 进行 运行 和 调试 ， 本 节 就 介绍 Cocos2D-X 的 调试 技巧 和 方法 。 


Visual Studio 2013 提 供 了 很 多 辅助 的 调试 方法 ， 如 设置 断 点 等 。 常 用 的 调式 快捷 键 如 下 。 


F9: 切换 断 点 。 


© Е5: 进入 调试 。 


- F10: 跨 过 程序 执行 。 


-F11: 单 步 运行 。 


其 中 设 断 点 的 作用 是 ， 程 序 运行 到 断 点 后 ， 便 可 以 通过 鼠标 放置 在 某 个 变量 上 以 获得 目前 该 变量 的 值 ， 根 据 这 些 变量 的 值 来 监控 程序 的 运行 是 否 达到 预期 ， 如 图 2-21 所 示 。 


Android 的 开发 在 Eclipse 开发 工具 中 提供 了 DDMS (Dalvik Debug Monitor Service) ， 它 提供 的 调试 功能 包括 : 为 测试 设备 截屏 、 针 对 特定 的 进程 查看 正在 运行 的 线程 以 及 堆 信息 、 


态 信息 、 模 拟 电 话 呼叫 、 接 收 SMS、 虚 拟 地 理 坐 标 等 。 
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2-21 


在 Eclipse 开 发 工具 中 选择 DDMS 就 可 以 显示 DDMS 服 务 界面 ， 如 图 2-22 所 示 。 
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其 中 Devices 选 项 是 模拟 器 中 安装 的 应 用 的 情况 ， 如 图 2-23 所 示 。 
LogCat 用 于 打印 运行 日 志 ， 如 图 2-24 所 示 。 


File Explorer 可 了 解 Android 操 作 系 统 中 文件 系统 的 情况 ， 如 图 2-25 所 示 。 
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82-23 ”Devices 选 项 
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图 2-24 LogCat 选 项 
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图 2-25 File Explorer 选 项 


Heap 和 Allocation Tracker 显 示 的 是 内 存 的 分 配 情况 ， 如 图 2-26 和 图 2-27 所 示 。 
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2-26 Heap 选项 


X Threads Heap Allocation Tra... 75 К Network Statis... TI File Explorer © Emulator Con 
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图 2-27 Allocation Tracket 选 项 


2.6.3 Xcode 的 调试 方法 


Xcode 支持 Mac 系 统 ， 它 是 iOS 系 统 和 和 Mac 系统 的 集成 开发 环境 ， 支 持 Objective-C 和 C++ 等 多 种 编 成 语言 。 不 仅 如 此 ，Xcode 还 支持 很 多 调试 的 方法 ， 包 括 检查 内 存 港 露 、 内 存 使 用 和 运行 效率 的 检查 
工具 。 


1. 检 查 内 存 泄露 


首先 介绍 检查 内 存 泄 露 的 方法 ，Xcode 提 供 的 静态 分 析 器 可 以 帮助 检查 内 存 泄露 ， 静 态 分 析 器 在 检查 代码 时 ， 会 枚 举 每 条 可 能 的 代码 路 径 ， 并 分 开 检 查 所 有 的 函数 和 方法 ， 它 可 以 根据 经 验 检查 猜测 执 
行 代码 后 可 能 发 生 的 情况 ， 并 报告 潜在 的 问题 。 


运行 静态 分 析 器 的 方法 是 按 住 Run 按 钮 不 放 ， 弹 出 窗口 (如 图 2-28 所 示 ) ， 选 择 Analyze。 也 可 以 使 用 键盘 快捷 键 Command+shift+B。 


$) (HN examplel4-1 › iPhone 5.0 Simulator - 


tm. 5 AT irf 
> Build for Running 22228 T Breakpoints 
= ин | BM + example14-1 } ( Јехатріе14-1 ) e 


м Build for Testing 


| ) ехатр1е14 1Арр0е1едаїе. срр 
ià 3 ехатр1е14—1 


(&) Build fer Profiling | 

5 Created by shuoquan man on 12-18-1. 
C 5 Copyright — MyCompanyName — 20122. A1 
Ф) Analyze ! | 


——m &include "AppDelegate.h" 
> {3 Dead store 
Value stored to 'mycol' during... 3B dinclude "roros2d.h" 


> Ш Dead store UD | £&include "MapScene.h" 
Value stored to 'myrow' during... | 


2-28 运行 静态 分 析 器 


点 击 分 析出 的 内 存 泄露 条 目 就 可 以 显示 整个 路 径 ， 如 图 2-29 所 示 。 


a Unused Entity Issue 
Unused variable 'mycol' 

Unused Entity lssue 
Unused variable ‘тугом 


je- Dead store 


Value stored to 'mycol' during... 
ь (3 Dead store 
Value stored to 'myrow' during... 


> (3 Dead store — 
Value stored to 'last' during its... 


图 2-29 静态 分 析 器 分 析出 的 问题 列表 

经 常 分 析 代 码 ， 可 以 帮助 开发 者 分 析出 很 多 被 忽略 的 问题 ， 花 时 间 展 开 并 和 弄 清楚 分 析 报 告 ， 这 不 仪 可 以 提高 应 用 的 代码 质量 ， 还 可 以 提高 开发 者 的 编程 能 力 。 
2.Instruments 组 件 

静态 分 析 器 只 能 分 析出 编译 时 刻 的 问题 ， 而 有 些 问题 只 会 在 运行 时 出 现 ， 这 时 就 要 使 用 Instruments 监 视 运 行 中 的 应 用 ， 并 找 出 运行 时 出 现 的 问题 。 

Instruments 由 若干 组 件 组 成 ， 可 以 检查 的 事项 包括 : 创建 了 哪些 对 象 、CPU 时 间 ， 文 件 VO 和 网 络 VO 等 ， 每 个 组 件 称 为 Instrument。 

Instruments 能 帮助 找 出 程序 中 的 低 效 环节 并 优化 代码 。 按 住 Run 按 钮 不 放 ， 弹 出 窗口 (如 图 2-30 所 示 ) ， 选 择 Profile 便 可 调 出 Instruments 组 件 。 

下 面 介绍 常用 的 内 存 查看 工具 Allocations 和 效率 查看 工具 Time Profiler， 首 先 介绍 内 存 查看 工具 Allocations。 

双击 Allocations 调 出 相应 组 件 ， 运 行 效果 如 图 2-31 所 示 。 


图 2-31 列 出 了 应 用 中 的 所 有 内 存 分 配 ， 在 窗口 右上 角 的 Category 查 询 框 中 输入 想 查看 的 类 以 滤 过 表格 ， 只 显示 想 看 到 的 类 的 内 存 分 配 。 点 击 Category 列 中 的 箭头 ， 可 以 查看 相应 的 内 存 分 析 的 详细 信 
息 。 点 击 详细 信息 中 的 条 目 选中 某 行 ，Extended Detail (扩展 详细 ) 区 域 会 显示 相应 的 栈 跟随 信息 ， 扩 展 详细 区 域 位 于 Instruments 窗 口 的 右 侧 ， 其 中 灰色 的 项 目 为 系统 库 的 调用 ， 黑 色 的 则 为 应 用 自己 的 
代码 ， 如 图 2-32 所 示 。 


Allocations Activity Monitor 


«л=м. 


Zombies Time Profiler System Trace Automation 


M Allocations 


This template measures heap memory usage by tracking allocations, including specific 
object allocations by class. It also can record virtual memory statistics by region. 


2-30  InstrumentsZE + 


еое Instruments1 


“Өс examplel4-1 ; 


instrumenti |Р E i ; i Р 


= . ЕН Statistics $ , Object Summary 
[Graph | Category Live Bytes # Living  & Transitory Overall Bytes Jve # Allocations (Net / Overall) 
(M * АПАШосайопѕ * 5.53 MB 17649 556829 116.62 МВ 574478 
| Malloc 16 Bytes 46.31 KB 2964 121308 1.90 ME 124272 | 
|  Malloc 64 Bytes B2.62 KB 132? 122363 7.55 MB 123685 | 
(9 Created & Still Living 四 Malloc 32 Bytes 165.53 KB 5297 82646 2.68 MB 87943 B 
С) Created & Destroyed Malloc 80 Bytes B6.95 KB 1113 72142 5.59 MB 73258 | ^ — 
ж Cali Tree | Malloc 48 Bytes 162.89 KB 3475 38064 1.80 MB 41539 8 
Munere Бу eem Malloc 56 Bytes 19.41 KB 207 38757 3.57 МВ 38964 и 
араа by Thread Malloc 512 Bytes 52.00 KB 104 22056 10.82 МВ 22160 О 
Invert Call Tree Malloc 128 Bytes 21.00 KB 168 9247 1.15 МЕ 9415 — 
J Hide Missing Symbols Malloc 1.00 KB 145.00 КВ 145 9203 9.13 МЕ 9348 Ш 
Hide System Libraries Malloc 4.00 KB 512.00 KE 128 6672 26.56 МЕ 68й0 F 
Show Obj-C Only Malloc 368 Bytes 5.75 KB 16 5801 2.04 MB 5817 В 
Кай а: Malloc 1.50 KR 79.50 KR 53 3442 5.12 МЕ 3495 | 
一 一 一 一 一 一 Malloc 272 Bytes 64.02 KB 2442 712.04 WE 2524 l 
= - 一 一 一 一 一 一 Malloc 160 Bytes 7.81 КЕ 50 2612 415.94 KB 2562 
| [3 Malloc 112 Rytes 7478 287.22? KR 2525 | 
CFArray (store-deque) .84 Ki 44 2005 70.00 KE 2049 | 
CFArray (mutable-vari... 09 £3 1058 £23.28 8 2021 | 
Malloc 8 Bytes i 13 1973 15.52 KB 1986 | 


ILI) EJ LUI 


| 


EE 


图 2-31 Allocations 组 件 运 行 界面 


Category: CFArray (store-deque) 
Type: Malloc 
Pointer. 0x75553e0 
Retain Count: 1 
Size: 48 


p- 


3  CFAllacatorSystemAllocate 
=] CFAllocatorAllocate 
-.j] .CFArrayReplaceValues 
Е CFArrayAppendValue 
 CFBundleCreate 
CFBundlec reate 
-[NSBundle cfBundle] 
-[NSBundle bundlePath] 
. |nitializeUIKitBundlePath 
pthread once 
 UlKitBundlePath 

. UlPackedimage Tablelnitialize 


Ili&harenlimoanoelinitiali»e 


1029890001 


ш ч еа Е Кш ышт T ТАШЫН ee iw пт нден Шы. 


Ul&pplicationinitialize 
UlApplicationMain 
main 


start 


2-32 Extended Detail [X 33i, 


查看 代码 便 可 以 发 现代 码 中 的 问题 ， 点 击 Allocations 边 上 的 小 图 标 设置 信息 ， 如 图 2-33 所 示 。 


Target 


ul ( example14-1 
rr Launch Configuration 
WM Tracker € v! Discard unrecorded data upon stop 

| | Record reference counts 

| | Only track active allocations 

| | Identify C++ Objects 

| | Enable NSZombie detection 

Track Display 


Style: ( Current Bytes 
Й Allocations Type: Overlay. 


Recorded Types 
Allocation Lifespan. v! Record all types 
^ All Objects Created | | Ignore types with 'N5' prefixes 
) Created & Still Living | |lgnore types with 'CF prefixes 
) Created & Destroyed | |lgnore types with 'Malloc' prefixes 


图 2-33 ”设置 信息 界面 


Time Profiler 组 件 可 以 找 出 被 浪费 的 CPU 处 理 周期 ， 按 下 Time Profiler 图 标 便 可 进入 Time Profiler 组 件 ， 如 图 2-34 所 示 。 


] Separate by Category | 6 0xa4637d0  CFArray (stor... 00:01.38... e 


eoo Instruments 


DOO meme: :) (© 00) 
Stop Target 


e ior ET XH" 


5 -PT 


Instruments 90:00 


& Time Profiler 


"m j 
Œ Time Profiler + ) = Call Tree * ) Call Tree 


Sample Perspective Self Symbol Name 
All Sample Counts 460.0ms 3.8% 460.0 POxe429b0a 


* Running Sample Times 440.0ms 3.6% 440.0 b 0хе429се2 
Call Tree 311.0т5 2.5% 311.0 POxe429b55 
Separate by Thread | 308.0ms 25% 308.0 void glgConvertTo 32 «GL GConverter ABGRS ARGBSR, (GLGMemory)2» (GL GOperationRec const*, GLDPixelh 

A Invert Call Tree 299,0ms 2.4% 299.0 b 0xe429b69 
Hide Missing Symbols 271.0ms 2.2% 271.0 b 0xe429d04 
Hide System Libraries 268.0ms 2.2% 268.0 b Oxe429d0b 

2 Show Obj-C Only 246.0ms 2.0% 246.0 b 0xe429c7d 
Flatten Recursion 227.0ms 1.8% 227.0 P Oxe429cfd 
Top Functions 178.0ms 1.4% 178.0 b 0xe429cd0 
Call Tree Constraints. 178.0ms 14% 178.0 b 0xe429c81 
Specific Data Mining | 141.0ms 1.1% 141.0 pOxe429b5c 

140.0ms 1.1% 140.0 POxe429d95 
123.0ms 10% 123.0 0xe429e8a 
120.0ms 0.9% 120.0 Þ0xe429bb0 
120.0ms 0.9% 120.0 ь0хе429е91 
114.0ms 0.9% 114.0 b 0xe429dad 
112.0ms 0.9% 112.0 b 0xe429cf1 


图 2-34 Time Ptofilet 组 件 


这 里 显示 的 是 应 用 在 执行 该 函数 时 消耗 的 时 间 ， 通 过 这 些 数据 可 以 大 致 了 解 应 用 执行 时 间 的 分 配 情 况 。 没 有 硬性 的 规定 来 判断 在 某 个 函数 上 消耗 多 少时 间 ， 应 用 就 一 定 有 问题 ， 而 是 在 发 现 有 卡 顿 现象 
的 情况 下 ， 再 查找 相应 的 问题 。 


提示 关于 Instrtuments 组 件 的 使 用 ， 是 一 个 熟 能 生 巧 的 过 程 ， 但 是 如 果 应 用 游戏 并 没有 表现 出 很 多 性 能 方面 的 问题 ， 游 戏 的 开发 者 没有 必要 在 Instruments 组 件 上 花费 过 多 时 间 。 以 Instrtuments 作 诊断 工 


有 具 ， 当 发 现 问 题 时 ， 再 通过 Instrtuments 找 到 并 修正 问题 。 


27 ”多 语言 混 编 Cocos2D-X 


Cocos2D-X 支 持 多 平台 ，Android 平 台 和 iOS 平 台 均 可 以 采用 Cocos2D-X 进 行 开 发 ， 但 是 由 于 Cocos2D-X 使 用 C++ 进 行 开 发 ， 常 常会 遇 到 调用 Android 和 iOS 平 台 的 本 地 开发 语言 Jlava 和 Objective-C 的 
情况 ， 本 节 就 介绍 Cocos2D-X 中 的 多 语言 开发 。 


2.7.1 在 Cocos2D-X 中 调用 Objective-C 


iOS 平 台 的 游戏 常常 需要 加 入 iOS 平 台 的 特性 或 者 调用 Game Center 等 情况 ， 这 时 就 需要 在 Cocos2D-X 中 调用 Objective-C 代 码 。 


首先 ， 在 Cocos2D-X 的 相关 类 中 获得 平台 情况 ， 如 果 是 iOS 平 台 则 调用 Objective-C 的 类 ， 获 得 平台 情况 的 代码 见 代码 清单 2-5。 
代码 清单 2-5 ”获得 平台 情况 


#if (CC TARGET PLATFORM == CC PLATFORM WIN32) 
#епаіғ // CC PLATFORM WIN32 - i 
#if (CC TARGET PLATFORM == CC PLATFORM IOS) 
#endif // CC PLATFORM IOS 
#if (CC TARGET PLATFORM == CC PLATFORM ANDROID) 
#endif 


其 中 CC_PLATFORM_WIN32 为 Win32 操 作 系 统 平台 ，CC_PLATFORM_1OS 为 iOS 操 作 系 统 平台 ，CC_PLATFORM_ANDROID 为 Android 操 作 系 统 平台 。 然 后 注意 以 下 两 点 ， 就 可 以 完成 Cocos2D-X 中 
C++ 和 Objective-C 的 混 编 。 


- 混 编 的 类 需要 将 其 实现 类 后 缓 名 由 .cpp 改 成 .mm。Xcode 集 成 开发 环境 在 编译 的 时 候 就 会 智能 地 知道 这 个 类 为 混 编 类 了 ， 不 需要 其 他 的 操作 。 
. 混 编 文 件 中 的 C++ 和 Objective-C 两 种 语言 的 语法 互 不 影响 。 


当 完 成 各 自 的 .cpp 和 .mm 文件 以 后 ， 在 C++ 的 .cpp 文 件 的 初始 化 函数 中 判断 是 否 为 iDs 平 台 的 代码 ， 在 后 面 写 Objective-C 代 码 调用 Objective-C 的 相关 类 即 可 。 注 意 ， 这 里 要 遵循 Objective-C 语 言 的 编 
写 规范 和 编码 规则 。 


27.2 ”在 Cocos2D-X 中 调用 Java 


开发 者 有 时 需要 在 Android 游 戏 中 加 入 广告 、 支 付 等 第 三 方 平台 或 者 单独 处 理 的 一 些 代码 ， 这 些 平台 有 的 只 支持 Java 代 码 。 在 Cocos2D-X 中 调用 Java 代 码 主要 分 如 下 两 个 步 又 。 


1) 引入 JniHelper 类 。 在 代码 头 引 入 如 下 两 行 代码 ， 见 代码 清单 2-6。 


代码 清单 2-6 引入 JniHelper 类 


#include «jni.h» 
#include "platform/android/jni/JniHelper.nh" 


2) 调用 JniHelper 类 的 getSstaticMethodlnfo 国 数 ， 见 代码 清单 2-7。 


代码 清单 2-7 通过 JniHelper 类 调用 Java 函 数 


JniMethodInfo t; 


if (JniHelper::getStaticMethodInfo(t, "com/JNIDemo/FMJNI 
" (Ljava/lang/String;Ljava/lang/String;)V"))( 
jstring stringArgl = t.env-»NewStringUTF ("2"); 
jstring stringArg2 = t.env-»NewStringUTF ("10"); 


"payMoney", 


t.env-»DeleteLocalRef (stringArgl); 
t.env-»DeleteLocalRef (stringArg2); 
t.env-»DeleteLocalRef (t.classID); 


ку. 


t.env-»CallStaticVoidMethod(t.classID, t.methodID, stringArgl, stringArg2); 


LEGERE SS FH 3X BUavaxE ҢЕР А ЕТТЕ, Бара, ТРА АОВ — 1-2 39U3JniMethodInfoZe23Rscpy, BSE AAA, BENSAER, "BE" 


参数 是 返回 类 型 。 判 断 该 函数 存在 后 便 可 调用 该 函数 。 


28 使 用 doxygen 获 得 Cocos2D-X 的 最 新 文档 


二 


doxygen 是 一 种 开源 跨 平台 的 工具 ， 其 功能 是 从 程序 源 代码 中 抽取 类 、 方 法 、 成 员 的 注释 形成 一 个 和 源 代码 配套 的 API 帮 助 文档 ，doxygen 工 具 完 全 支持 C、C++、Java、Objective-C 等 语言 ， 部 分 支 


持 PHP、C#。 


doxygen 可 以 根据 代码 中 的 注释 按照 规则 生成 相应 的 文档 ，Cocos2D-X 的 代码 就 依照 了 它 的 规则 ， 并 且 提 供 了 doxygen.config 文 件 ， 这 是 Cocos2D-X 代 码 的 doxygen 配 置 文 档 ， 可 以 通过 这 个 文件 来 


生成 Cocos2D-X 的 文档 。 


首先 下 载 doxygen， 下 载 地 址 为 http://www.doxygen.nl/download.html#latestsrc， 根 据 系 统 选择 要 下 载 的 版 本 ， 建 议 下 载 安装 版 。 下 载 完成 后 运行 程序 出 现 如 图 2-35 所 示 的 界面 。 


| Doxygen GUI frontend 


Step 1: Specify the working directory from which doxygen will run 


| Select... 


Step 2: Configure doxygen using the Wizard and/or Expert tab, then switch to the Run tab to generate the documentation 


Topics 
Project 
Mode 
Output 
Diagrams 


EAN Expert Вип | 


Provide some information about the project you are documenting 


Project name: му Рго]есї 


Project synopsis: 


Project version or id: 


Project logo: | Select... | 


Specify the directory to scan for source code 


Source code directory: | Select... 
| Scan recursively 


Specify the directory where doxygen should put the generated documentation 


Destination directory: | Select... | 


Previous | Next 


图 2-35 doxygen 的 运行 界面 


单 击 File 一 Open 打 开 cocos2d-x 目 录 中 docs 目 录 下 的 doxygen.config 文 件 ， 界 面 如 图 2-36 所 示 。 


打开 配置 文件 后 出 现 了 Cocos2D-X 版 本 配置 信息 ， 单 击 Run 一 Run doxygen 运 行 生 成 文档 即 可 ， 完 成 后 如 图 2-37 所 示 。 


0.0.0. 


Doxygen CUI frontenc (/Users/manshuoquan/Documents /develop/cocos2d-xr /docs /doxygen.config) 
Step 1: Specify the working directory from which doxygen will run 
[Users /manshuoquan/Documents /develop/cocos2d-xr/docs | Select... | 


Step 2: Configure doxygen using the Wizard and/or Expert tab, then switch to the Run tab to generate the documentation 


Topics 
| ү Provide some information about the project you are documenting 
Mode 

Output 
Diagrams 


Project name: cocos2d-x 


Project synopsis: 


Project version or id: 3.0 


Project logo: | Select... | 


Specify the directory to scan for source code 


Source code directory: ../cocos | | Select. - 
м Scan recursively 


Specify the directory where doxygen should put the generated documentation 


Destination directory: ./ | Select. | 


Previous | Мехї | 


图 2-36 ”打开 doxygen.config 的 界面 
eoo0 Doxygen GUI frontend (/Users/manshuoquan/Documents /develop/cocos2d-xr/docs/doxygen.config) 


Step 1: Specify the working directory from which doxygen will run 


[Users /manshuoquan/Documents /develop/ cocos2d-xr/docs| | Select... | 


Step 2: Configure doxygen using the Wizard and/or Expert tab, then switch to the Run tab to generate the documentation 


| Wizard | Expert | Run | 


| Rundoxygen | Status: not running | Show configuration | | Save log... | 


Output produced by doxygen 


/Users /manshuoquan/Dccuments /develop/cocos2d-xr/cocos/editor- 
support/cocostudio/CCProcessBase.h:50: warning: Found unknown command "Mlua' 

/Users /manghuoquan/Documents /develop/cocos2d-xr/cocos/editor-support/cocostudio/CCTween.h:3EB: 
warning: Found unknown command "*js' 

/Users /manshuoquan/Dccuments /develop/cocos2d-xr/cocos/editor-support/cocostudio/CCTween.h: 39: 
warning: Found unknown command "*lua' 

/Users /manshuoquan /Documents /develop/cocos2d-xr /cocos /editor- 
support/cocostudio/CCSpriteFrameCacheHelper.h:34: warning: Found unknown command `\]в' 
/Users /manshuoquan/Documents /develop/cocos2d-xr/cocos/editor- 
support/cocostudio/CCSpriteFrameCacheHelper.h:35: warning: Found unknown command `\lua' 
/Users /manshuoquan/Dccuments /develop/cocos2d-xr/cocos/ui/UITextField.h:34: warning: Found 
unknown command `\js' 

/Users /manshuoquan/Documents /develop/cocos2d-xr/cocos/ui/UITextField.h:35: warning: Found 
unknown command `\1ча' 

Generating member index... 

Generating file index... 

Generating file member index... 

Generating example index... 

finalizing index lists... 

lookup cache used 18371/65536 hits-128808 misses-20932 

finished... 

*** Doxygen has finished 


| Show HTML output | 


图 2-37 ”doxygen 完成 文档 生成 


打开 Cocos2D-X 目 录 下 docs\html 目 录 的 index.html| 文 件 ， 如 图 2-38 所 示 ， 可 以 使 用 Cocos2D-X 的 文档 了 。 


COCOS2d-X зо 


Maln Page Related Pages | Modules | Namespaces Classes Files 


| 
aom COCOS2Q-x 

Deprecated List 

Modules 

Namespaces 

Classes 


Files 


About cocos2d-x 


cocos2d-x open source project is designed to be a cross-platform 2D game engine for building 2D games, demos and other 
graphical/interactive mobile applications. It runs on top of OpenGL 2.0 and орем ES 2.0 and is written in С++. 
This project is bosed on the famous "cocos2d- phone" project. 


website: http://www.cocos2d-x.ora/ 
forum: nttp://forum.cocos2d-x.org/ 

twitter: http://twitter.cCom/cocos2dx/ 
weibo: http://weibo.com/cocos2dx/ 


图 2-38 | Cocos2D-X Xx Jil 


29 ”启动 文件 和 二 本 


引擎 入 口 从 AppDelegate 的 applicationDidFinishLaunching 函 数 进入 ， 见 代码 清单 2-8。 


代码 清单 2-8 AppbDelegateBSapplicationDidFinishLaunchingBgZi 


bool AppDelegate::applicationDidFinishLaunching() { 
// 


auto director = Director::getInstance(); 
Loci 
画布 

auto glview = director-»getOpenGLView (); 


if(!glview) { 
glview = GLView::create("My Game"); 
director-»setOpenGLView (glview); 


} 
glview-»setDesignResolutionSize (960,640, 


ResolutionPolicy::SHOW ALL); 


director-»setDisplayStats (true); 


director-»setAnimationInterval(1.0 / 60); 


auto scene - GameMenu::scene(); 
// 

运行 场景 
director-»runWithScene (scene); 
return true; 


re 


其 中 可 以 通过 调用 GLView 的 setDesignResolutionsize 设 置 游戏 的 分 辨 率 大 小 和 适 配 方式 ， 设 计 分 辨 率 是 游戏 选择 的 基础 分 辨 率 ， 可 以 是 一 种 标准 机 器 的 分 辨 率 ， 也 可 以 根据 项 目 特 点 确定 。 可 选 的 适 
配方 式 如 下 。 


- ResolutionPolicy:SHOW. ALL: 屏幕 帘 、 高 分 别 和 设计 分 辨 率 宽 、 高 计算 缩放 因子 ， 取 较 小 者 作为 帘 、 高 的 缩放 因子 。 这 种 适 配 方式 保证 了 设计 区 域 全 部 显示 到 屏幕 上 ， 但 可 能 会 有 黑 边 。 
. ResolutionPolicy:EXACT_FIT: 屏幕 宽 与 设计 宽 比 作为 双方 向 的 缩放 因子 ， 屏 幕 高 与 设计 分 辨 率 高 之 比 作为 Y 方 向 的 缩放 因子 。 保 证 了 设计 区 域 完 全 铺 满 屏 幕 ， 但 是 可 能 会 出 现 图 像 拉 伸 。 


ResolutionPolicy:NO_BORDER: 屏幕 的 宽 、 高 分 别 与 设计 分 辨 率 宽 、 高 来 计算 缩放 因子 ， 取 较 大 者 作为 宽 、 高 的 缩放 因子 。 保 证 了 设计 区 域 总 能 一 个 方向 上 铺 满 屏幕 ， 而 另 一 个 方向 一 般 会 超出 屏幕 
区 域 。 


· ResolutionPolicy::FIXED_HEIGHT: 保持 传 入 的 涉及 分 状 率 高 度 不 变 ， 根 据 屏 幕 分 辩 率 修正 设计 分 辩 率 的 宽度 。 
: ResolutionPolicy::FIXED_WIDTH: 保持 传 入 的 涉及 分 辨 率 宽度 不 变 ， 根 据 屏 幕 分 状 率 修正 设计 分 辩 率 的 高 度 。 


一 般 的 游戏 中 ， 是 不 能 容忍 黑 边 的 存在 和 屏幕 上 有 部 分 没有 显示 的 ， 而 Android 机 器 的 屏幕 分 辩 率 非常 多 ， 如 何 适 配 呢 ”这 里 提供 一 个 方法 ， 以 iOs 的 屏幕 分 辨 率 宽 高 比 为 基础 ， 对 宽 高 比分 段 处 理 ， 见 
代码 清单 2-9。 


代码 清单 2-9 ”分 段 处 理 屏幕 大 小 适 配 


Size winsize = director-»getVisibleSize(); 
double ratio = winsize.height / winsize.width; 


// 

对 应 jPhone 5 

及 以 上 ， 并 且 对 应 高 / 

宽 >1136/640 Апаго1а 

中 这 种 设备 也 不 多 

if(ratio >= 1.775) { 
glview-»setDesignResolutionSize (640,1136 
,ResolutionPolicy::SHOW ALL); 


4 
中 间 iPhone 5 
和 :iPhone 4 
中 间 的 ， 按 自己 跨 高 比 处 理 ， 包 括 1024/640 
的 ijPad 
}else if(ratio > 1.5) { 
glview->setDesignResolutionSize (640,640 * ratio,ResolutionPolicy::SHOW ALL); 
// 


高 / 

宽 >1136/640<640/960 

也 不 多 ， 以 下 的 都 按 iPhone 4 

处 理 ， 包 括 1024/768 

的 ijPad 

}else{ 

glview->setDesignResolutionSize (640,960, 
ResolutionPolicy::SHOW ALL); 


) 


需要 说明 的 是 ， 实 际 开 发 中 没有 一 种 适 配 策略 是 万 能 的 ， 要 根据 不 同 的 项 目 来 决定 。 


210 ”本 章 小 结 


本 章 学 习 Cocos2D-X 的 项 目 在 Win32、Android、iOS 开 发 环境 中 的 安装 与 配置 ， 详 细 介 绍 了 项 目 结构 以 及 新 建 项 目 和 交叉 编译 。 其 中 在 Windows 环 境 下 需要 了 解 VS 的 使 用 以 及 模板 的 安装 ; 在 
Android 环 境 下 ， 需 要 学 习 Eclipse、Android SDK、ADT 的 基本 配置 和 Android NDK 工 具 的 配合 使 用 。iOS 的 开发 在 Mac 上 进行 ， 需 要 安装 Xcode 工具 。 最 后 介绍 了 文档 生成 工具 doxygen， 使 用 该 工具 生 
成 文档 ， 可 以 根据 文档 更 好 地 学 习 和 使 用 Cocos2D-X， 另 外 本 章 还 介绍 了 Cocos2D-X 3.0 版 本 新 提供 的 一 系列 开发 工具 ， 大 大 提升 了 我 们 的 开发 效率 。 


学 习 本 章 内 容 后 ， 根 据 提示 一 步 步 完 成 跨 平 台 系统 的 搭建 ， 为 今后 的 学 习 做 准备 。 从 第 3 章 开始 ， 正 式 介绍 Cocos2D-X 相 关 知 识 ， 首 先 介绍 Cocos2D-X 的 核心 类 。 


第 3 章 ”Cocos2D-X 中 的 核心 类 


Cocos2D-X 引 擎 作为 一 个 基于 OpenGL ES 的 二 维 游戏 引擎 ， 主 要 的 功能 是 将 OpenGL 的 绘制 功能 封装 在 更 加 贴近 游戏 中 的 对 象 里 ， 因 此 它 的 主要 设计 思路 是 将 游戏 的 各 个 部 分 抽象 成 特殊 的 概念 ， 包 括 
导演 、 场 景 、 布 景 层 和 精灵 ， 然 后 用 这 些 接近 游戏 中 的 概念 的 对 象 来 封装 OpenGL 的 泻 染 ， 更 好 地 供 游戏 开发 者 调用 ， 这 些 对 象 之 间 的 关系 如 图 3-1 所 示 。 


导演 


图 3-1 Cocos2D-X 基 本 部 分 间 的 关系 


如 图 3-1 所 示 ， 几 乎 任何 一 款 游戏 中 都 会 有 这 些 概念 ， 而 游戏 的 复杂 程度 也 就 决定 这 些 部 分 之 间 的 关系 的 复杂 程度 。 有 具体 说 明 如 下 。 
: 导演 (Director) : 导演 类 是 游戏 中 的 组 织 者 和 领导 者 ， 是 整个 游戏 的 负责 人 、 总 指挥 ， 寻 演 类 可 以 制定 游戏 的 运行 规则 ， 从 而 让 游戏 内 的 场景 、 布 景 类 和 精灵 类 有 序 地 进行 。 
CJ (Scene) : 场景 就 是 一 个 关卡 ， 或 者 是 一 个 游戏 界面 ， 这 样 的 一 个 个 场景 确定 了 整个 的 游戏 。 


ЖА (Layer) : 一 个 场景 可 以 由 多 个 布景 层 构 成 ,布景 层 就 是 关卡 里 的 背景 ， 不 同 关 卡 也 就 是 场景 需要 的 布景 层 不 同 。 有 时 候 ， 为 了 游戏 的 不 同 模 块 的 管理 更 加 方便 ， 会 把 一 个 场景 分 为 多 个 布景 
层 ， 如 UI 布景 层 、 游 戏 布景 层 ; 有 些 游戏 需要 更 细致 的 划分 ， 可 以 分 为 游戏 对 象 布景 层 和 游戏 地 图 布 录 图 。 


` 节点 (Node) : 节点 本 身 并 不 承载 任何 显示 在 屏幕 上 的 内 容 (图 片 或 者 图 形 ) ， 但 是 所 有 显示 在 屏幕 上 的 内 容 的 元 素 都 是 节点 的 子 类 ， 所 以 也 可 以 说 ， 显 示 在 屏幕 上 的 元 素 恬 为 节点 。 


本 章 主要 介绍 这 些 Cocos2D-X 基 础 类 。 由 于 Cocos2D-X 3.0 中 对 Cocos2D-X 的 演 染 系统 做 了 较 大 的 改变 ， 所 以 本 章 首先 介绍 Cocos2D-X 绘 制 的 基本 原理 ， 然 后 介绍 Cocos2D-X 3.0 版 本 的 演 染 系统 ， 最 
后 逐一 介绍 Cocos2D-X 中 的 基本 元 素 。 


3.1 “坐标 系 简 介 


坐标 系 帮助 我 们 在 屏幕 中 定位 要 绘制 图 像 的 位 置 ， 而 不 同 的 坐标 系 就 意味 着 不 同 的 定位 规则 ， 这 些 规 则 常常 会 让 我 们 混淆 ， 这 一 节 就 介绍 4 种 常用 的 坐标 系 并 把 这 4 种 坐标 系 在 Cocos2D-X 中 扮演 的 角色 
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3.1.1 _ OpenGL 坐 标 系 


Cocos2D-X 以 OpenGL 和 OpenGL ES 为 基础 ， 所 以 自然 支持 OpenGL 坐 标 系 ， 坐 标 系 原 点 在 屏幕 左下 角 ，x 轴 正方 向 向 右 ，y 轴 正方 向 向 上 。 


由 于 屏幕 坐标 系 使 用 的 是 不 同 的 坐标 系统 ， 原 点 在 屏幕 左上 角 ，x 轴 正方 向 向 右 ，y 轴 正方 向 向 下 。 在 之 前 的 引擎 版 本 中 ， 屏 幕 触摸 事件 Touch 传 入 的 位 置信 息 使 用 的 是 屏幕 坐标 系 。 因 此 在 Cocos2D-X 
中 对 触摸 事件 做 出 响应 前 ， 需 要 首先 把 触摸 点 转化 到 OpenGL 坐 标 系 ， 需 要 调用 Director 的 convertToGL 函 数 来 完成 这 一 转化 ， 但 是 在 3.0 版 本 中 ，Touch 把 转化 的 一 步 封装 在 了 自己 的 函数 里 ， 可 以 直接 调 
用 getLocation 函 数 来 获得 坐标 ， 这 样 就 不 需要 再 进行 转换 了 ， 简 化 了 调用 函数 和 接口 。 


3.1.2 ”世界 坐标 系 


世界 坐标 系 也 叫做 “绝对 坐标 系 ”， 是 游戏 开发 中 的 “建立 ”概念 ， 因 此 “世界 ” 即 是 游戏 世界 ， 它 建立 了 描述 其 他 坐标 系 所 需要 的 参考 标准 。 我 们 能 够 用 世界 坐标 系 来 描述 其 他 坐标 系 的 位 置 ， 它 是 
Cocos2D-X 中 一 个 全 局 坐标 的 概念 。 


Cocos2D-X 中 的 元 素 是 有 父子 关系 的 层级 结构 ， 通 过 Node 设 置 位 置 使 用 的 是 相对 其 父 节点 的 本 地 坐标 系 而 非 世 界 坐标 系 。 最 后 在 绘制 屏幕 时 ，Cocos2D-X 会 把 这 些 元 素 的 本 地 节点 坐标 映射 成 世界 坐 
标 系 坐 标 。 世 界 坐标 系 和 OpenGL 坐 标 系 方向 一 致 ， 原 点 在 屏幕 左下 角 ，x 轴 向 右 ，y 轴 向 上 。 


下 面 让 我 们 暂时 从 纷乱 的 坐标 系 中 抽出 来 ， 看 一 个 重要 概念 : ға. 
锚 点 指定 了 贴图 上 和 所 在 节点 原点 (也 就 是 设置 位 置 的 点 ) 重合 的 点 的 位 置 ， 因 此 只 有 在 Node 类 节点 使 用 贴图 的 情况 下 ， 锚 点 才 有 意义 。 


锚 点 的 默认 值 是 (0.5,0.5) ， 表 示 的 并 不 是 一 个 像素 点 ， 而 是 一 个 乘 数 因子 。 (0.5,0.5) 表示 锚 点 位 于 贴图 长 度 乘 以 0.5 和 宽度 乘 以 0.5 的 地 方 ， 即 贴图 的 中 心 。 


虽然 改变 锚 点 的 值 可 能 看 起 来 节点 的 图 像 位 置 发 生 了 变化 ， 但 其 实 并 不 会 改变 节点 的 位 置 ， 变 化 的 只 是 贴图 相对 于 设置 的 相对 位 置 ， 相 当 于 你 在 移动 节点 里 的 贴图 ， 而 非 节点 本 身 。 如 果 把 锁 点 设置 成 
(0,0) ， 贴 图 的 左下 角 就 会 和 节点 的 位 置 重 合 ， 这 可 能 使 得 元 素 定 位 更 为 方便 ， 但 会 影响 到 元 素 的 缩放 和 旋转 等 一 系列 变换 ， 因 此 并 没有 一 种 锚 点 设置 是 放 之 四 海 而 皆 准 的 ， 要 根据 这 个 对 象 的 使 用 情况 来 
定义 ， 比 如 一 个 矩形 框 需要 贴 着 屏幕 左下 角 显 示 ， 只 需要 把 锚 点 设 在 和 矩形 框 的 左下 角 ， 然 后 设置 坐标 为 原点 (0,0) 即 可 。 在 Cocos2D-X 中 ， 锚 点 为 默认 值 (0.5,0.5) ， 这 样 的 锚 点 设置 要 把 一 个 节点 放置 到 
贴图 的 中 央 。 


3.1.3 节操 坐标 系 


节点 坐标 系 是 和 特定 节点 相关 联 的 坐标 系 。 每 个 节点 都 有 它们 独立 的 坐标 系 ， 当 节点 移动 或 改变 方向 时 ， 和 该 节点 关联 的 坐标 系 ( 它 的 子 节 点 ) 将 随 之 移动 或 改变 方向 。 这 一 切 都 是 相对 的 ， 相 对 于 基 
准 的 。 只 有 在 节点 坐标 系 中 才 有 意义 。 


Node 类 设置 位 置 的 方法 使 用 的 就 是 父 节点 的 节点 坐标 系 ， 它 和 OpenGL 坐 标 系 的 方向 也 是 一 致 的 ，x 轴 向 右 ，y 轴 向 上 ， 原 点 在 父 节点 的 左下 角 。 如 果 父 节点 是 场景 树 中 的 顶层 节点 ， 那 么 它 使 用 的 节点 
坐标 系 就 和 世界 坐标 系 重合 了 。 


Node 类 对 象 中 有 两 个 函数 可 以 便捷 地 进行 坐标 转换 。 
: convertToWorldSpace: 把 基于 当前 节点 的 本 地 坐标 系 下 的 坐标 转换 到 世界 坐标 系 中 。 
: convert'oNodeSpace: 把 世界 坐标 转换 到 当前 节点 的 本 地 坐标 系 中 。 


这 两 种 转换 都 是 不 考虑 锚 点 的 ， 都 以 当前 节点 父 类 的 左下 脚 的 坐标 为 标准 ， 另 外 Node 还 提供 了 convertToWorldSpaceAR 和 convertToNodeSpaceAR， 这 两 个 方法 实现 同样 的 功能 ， 但 是 它们 的 基准 
坐标 是 基于 坐标 锚 点 的 ， 几 乎 所 有 的 游戏 引擎 都 会 使 用 类 似 的 本 地 坐标 系 而 非 世界 坐标 系 来 指定 元 素 的 位 置 。 


这 样 做 的 好 处 是 ， 当 计算 物体 运动 的 时 候 使 用 同一 本 地 坐标 系 的 元 素 可 以 作为 一 个 子 系统 独立 计算 ， 最 后 再 加 上 坐标 系 的 运动 即 可 ， 这 是 物理 研究 中 带 用 的 思路 。 例 如 ， 一 个 在 行驶 的 车 厢 内 上 下 跳动 
的 人 ， 只 需要 在 每 帧 绘制 的 时 候 计 算 他 在 车 厢 坐 标 系 中 的 位 置 ， 然 后 加 上 和 车 的 位 置 就 可 以 计算 出 人 在 世界 坐标 系 中 的 位 置 ， 如 果 使 用 单一 的 世界 坐标 系 ， 人 的 运动 轨 人 迹 就 变 复杂 了 ， 就 涉及 运动 轨迹 的 合成 
与 分 解 了 。 


3.1.4 (5833518 


最 后 介绍 仿 射 变换 ， 游 戏 大 量 使 用 的 旋转 、 缩 放 、 平 移 等 都 是 仿 射 变换 ， 所 谓 仿 射 变 换 是 指 在 线性 变换 的 基础 上 加 上 平移 ， 平 移 不 是 线性 变换 。 


二 维 计算 机 图 形 学 中 的 仿 射 变 换 通常 是 通过 和 3x 3 齐 次 矩阵 相 乘 来 实现 的 。Cocos2D-X 的 AffineTransform 结 构 体 的 定义 如 代码 清单 3-1 所 示 。 


代码 清单 3-1 AffineTransform 结 构 体 定义 


struct CCAffineTransform { 

CCFloat a, b, c, d; 

CCFloat tx, ty; 

static const AffineTransform IDENTITY;// 
默认 AffineTransform 
} 


Ж Х@Ййа, b. с, d. ty. ty， 它 们 在 矩阵 中 的 位 置 如 图 3-2 所 示 。 


а в: о 


图 3-2 AA] [е XL 


3.2 Cocos2D-X E% 
在 学 习 Cocos2D-X 的 演 染 原理 之 前 ， 先 来 了 解 一 下 Cocos2D-X 的 泻 染 结构 。 


3.2.1 ўа 


从 图 3-1 就 可 以 看 到 ，Cocos2D-X 采 取 的 是 一 种 层级 管理 的 结构 ， 这 种 结构 就 是 ， 导 演 类 直接 控制 整个 游戏 的 根 节点 ， 即 场景 ， 再 由 场景 控制 子 节点 布景 层 之 间 的 切换 ， 最 后 是 布景 层 控制 所 有 显示 的 
节点 ， 任 何 二 维 游戏 都 是 通过 不 同 的 图 片 不 同 的 位 置 ， 显 示 层 次 拼接 而 成 的 。 


泻 染 树 是 由 各 种 游戏 元 素 按照 层次 关系 构成 的 树 结构 ， 每 个 节点 都 有 其 子 节点 ， 移 动 一 个 父 节点 ， 就 是 把 他 的 子 节点 全 部 移动 了 ， 绘 制 父 节 点 时 会 引起 子 节点 的 绘制 ， 同 时 ， 子 节点 的 绘制 方式 与 父 节 
点 的 属性 也 有 关 。 例 如 ， 父 节点 设置 了 放大 比例 ， 则 子 节点 也 会 随 之 放大 。 这 样 做 的 好 处 就 是 可 以 统一 处 理 一 批 节点 的 属性 ， 而 不 必 一 个 一 个 去 设置 ， 例 如 有 一 个 游戏 中 的 弹 板 ， 上 面 有 背景 图 、 文 字 及 按 
钮 ， 它 们 需要 一 起 显示 、 一 起 被 关闭 ， 这 时 就 可 以 把 所 有 节点 放 到 一 个 节点 树 中 ， 这 样 只 设置 父 节 点 显示 或 者 不 显示 即 可 ， 另 外 弹 板 弹出 时 的 缩放 和 移动 动画 动作 也 可 以 挂 在 父 节 点 上 。 所 以 说 如 何 处 理 游 
戏 中 的 层次 和 父子 节点 的 从 属 关系 其 实 也 是 个 学 问 ， 需 要 根据 实际 需求 做 相应 处 理 ， 做 好 了 能 起 到 事半功倍 的 效果 。 

3.2.2 јај 
Cocos2D-X 3.0 版 本 的 一 个 重大 改变 就 是 整个 演 染 系统 的 修改 ， 过 去 的 演 染 系统 是 由 父 节点 通过 visit 函 数 调用 底层 的 OpenGL 函 数 来 绘制 ， 但 是 这 样 造 成 了 两 个 问题 。 


一 是 绘制 顺序 的 灵活 性 没有 了 ， 后 调用 visit 函 数 的 节点 肯定 会 覆盖 先 调用 visit 函 数 的 节点 ， 这 样 如 果 想 改变 节点 的 遮挡 顺序 ， 就 必须 调用 重新 排序 函数 ， 这 样 的 限制 对 于 一 般 UI 比 较 多 的 卡 牌 游戏 还 能 
勉强 应 付 ， 但 开发 大 型 角色 扮演 或 者 动作 游戏 时 ， 会 成 为 一 个 很 大 的 限制 和 阻碍 。 


二 是 从 设计 的 角度 说 ， 逻 辑 和 泻 染 没有 做 到 分 离 ， 不 同 功 能 的 代码 混在 一 起 ， 这 并 不 是 一 个 好 的 设计 ; 除 此 之 外 ， 新 的 演 染 框架 还 兼 具 一 项 任务 ， 那 就 是 提高 演 染 效率 。 
对 应 这 些 问 题 ，Cocos2D-X 3.0 的 泻 染 系统 做 了 如 下 改动 。 


. 将 泻 染 从 场景 树 上 解 未 。 这 是 这 次 泻 染 部 分 重 构 最 重要 的 一 个 修改 ， 这 个 改动 解决 了 之 前 介绍 的 泻 染 系统 存在 的 两 个 重大 问题 。 在 visit 夯 数 中 不 再 调用 任何 OpenGL 示 数 ， 而 是 将 泻 染指 令 存 入 一 个 队 
—% 


列 中 ， 等 待 进 处 理 。 这 样 做 首先 从 设计 上 分 离 了 泻 娄 和 游戏 逻辑 ， 其 次 是 让 泻 染 有 了 更 多 的 灵活 性 ， 队 列 中 的 泻 染 命 令 还 没有 被 执行 就 有 被 修改 的 可 能 ， 从 而 解决 了 之 前 的 两 个 问题 。 
‚ 泻 染 线 程 。 将 调用 OpenGL 的 泻 染 还 辑 代码 从 主线 程 分 出 去 单独 开 了 一 个 线程 ， 这 样 引 擎 会 在 多 核 CPU 的 设备 上 有 更 好 的 发 挥 。 


自动 裁剪 和 自动 加 入 批 处 理 精 灵 。 这 两 个 功能 点 都 对 效率 有 显著 的 提升 ， 首 先 自动 裁剪 会 自动 筛选 出 屏幕 外 的 节点 ， 并 且 不 调用 这 些 节点 的 绘制 函数 。 然 后 将 使 用 相同 图 片 的 精灵 的 泻 染 采用 批 处 理 
的 方法 ， 减 少 的 函数 的 调用 次 数 。 这 两 个 功能 都 是 由 于 将 泻 染 命 令 提 前 存 入 队列 中 ， 然 后 在 对 队列 进行 再 处 理 才 变 得 可 行 的 。 


* 自 定 义 节 点 。 以 节点 为 单位 自 定 义 DpenGI 命 令 。 另 外 一 个 特点 就 是 不 仅 支 持 二 维 泻 染 ， 对 三 维 泻 娄 也 有 同样 的 支持 。 


全 新 的 泻 染 排序 函数 ， 之 前 引擎 改变 节点 间 的 遮挡 关系 是 件 相当 麻烦 的 事 ， 这 也 对 Cocos2D-X 可 开发 的 游戏 类 型 是 个 制约 ， 昌 然 可 以 通过 调用 setZOrder 国 数 来 实现 改变 节点 间 的 前 后 顺序 ， 改 变 泻 染 
顺序 ， 从 而 改变 遮挡 关系 ， 可 是 这 些 节点 如 果 在 不 同 的 父 节 点 上 ， 它 们 所 属 父 节点 的 遮挡 顺序 也 将 决定 它们 之 间 的 遮挡 顺序 ， 这 样 就 有 了 “本 地 ”遮挡 关系 和 “全 局 ”遮挡 关系 两 个 方面 ， 由 于 Cocos2D-X 
3.0 不 是 直接 在 visit 中 调用 ， 而 是 将 泻 染 指令 人 存 入 到 队列 中 ， 从 而 允许 在 处 理 遮挡 关系 方面 更 加 灵活 ， 可 以 通过 调用 setLocalZOrder 和 setGlobalZOrder 来 分 别处 理 不 同 的 遮挡 关系 的 需求 ， 才 能 灵活 地 为 节 
点 排序 。 


Cocos2D-X 3.0 的 演 染 顺序 如 下 。 


1) 主线 程 调用 drawScene 开 始 绘制 场景 。 


2) BIBER FPA, BDUARFHvisitESEA. 
3) 调用 每 一 个 节点 的 绘制 函数 draw 函 数 。 
4) 初始 化 演 染 命令 会 把 这 个 对 象 ( 即 QuadCommand 对 象 ) 放 进 泻 染 队 列 里 。 


5 


泻 染 逻辑 : 首先 进一步 处 理 演 染 命令 ， 包 括 自 动 裁剪 和 自动 批 处 理 ， 处 理 完成 后 执行 泻 染 命令 。 


3.3 PAX 


үз, ла 


节点 类 Node 是 Cocos2D-X 中 的 主要 类 ， 继 承 自 Ref ， 继 承 关 系 如 图 3-3 所 示 。 


Ref 


图 3-3” Node 类 的 继承 关系 


任何 需要 画 在 屏幕 上 的 对 象 都 是 节点 类 ， 最 常用 的 节点 类 包括 场景 类 (Scene) 、 布 景 层 类 (Layer). RŽ (Sprite) 、 菜 单 类 (Menu) 。 
Node 类 包括 如 下 的 主要 功能 : 
` 每 个 节点 都 可 以 含有 子 节点 ， 这 点 本 书 也 会 在 后 面 给 出 示例 。 


. 节点 含有 周期 性 回调 的 方法 (Schedule、Unschedule 等 ) ， 关 于 周期 性 回调 方法 ， 本 章 将 会 有 一 节 单 独 讲解 ， 如 果 现 在 不 了 解 可 以 跳 过 这 上 段 内 容 。 


- 可 以 含有 动作 (Action) 。 
Node 可 以 为 自己 和 它 的 子 节点 添加 额外 的 功能 ， 无 论 是 Node 运 行 的 动作 (Action) ， 还 是 设置 的 旋转 角度 和 位 置 等 属性 ， 父 节点 的 设置 都 可 以 传递 到 子 节点 上 ， 这 点 在 一 些 游戏 的 开发 中 可 以 使 我 们 
的 管理 更 轻松 。 比 如 某 些 纵 版 射击 游戏 ， 玩 家 控制 的 主角 飞机 需要 携带 子 机 ， 子 机 的 移动 位 置 要 随 着 主机 一 起 移动 ， 我 们 就 可 以 把 子 机 设置 为 主机 的 子 节点 


， 这 样 在 设置 位 置 的 时 候 只 需要 设置 主机 的 位 置 
就 可 以 了 ， 大 大 减少 了 程序 员 需 要 处 理 的 内 容 ， 提 高 了 代码 的 清晰 度 和 可 读 性 。 


由 于 Node 类 不 自 带 贴图 ， 其 实在 屏幕 上 看 不 到 任何 节点 类 的 效果 ， 所 以 一 般 使 用 Node 类 的 场合 有 两 个 : 第 一 个 情况 就 是 ， 需 要 一 个 父 节点 来 管理 一 批 子 节点 ， 这 时 候 可 以 设置 一 个 “无 形 ” 的 子 节点 
来 管理 子 节点 ; 另 一 种 情况 就 是 有 时 需要 自己 定义 一 个 在 屏幕 上 显示 的 对 象 ， 这 时 候 让 新 定义 的 这 个 类 继承 自 Node。 


一 个 类 继承 自 Node 类 ， 说 明 它 有 如 下 特点 。 
- 重 写 初始 化 的 方法 和 周期 性 回调 方法 。 
- 在 时 间 线 上 控制 回调 。 


` 重 写 泻 染 的 绘制 方法 。 


Node 类 不 含有 贴图 ， 它 可 以 进行 位 置 的 平移 、 大 小 的 伸缩 变化 、 旋 转变 化 ， 在 使 用 网 格 特效 (会 在 后 面 的 章节 介绍 ) 的 时 人 息 ， 网 格 特效 可 以 获得 屏幕 中 绘制 的 内 容 ， 并 且 对 获得 的 屏幕 内 容 进 行 泻 染 。 
这 在 游戏 中 需要 一 些 全 屏 特 效 的 时 候 可 以 使 用 。 


下 面 分 别 介 绍 Node 类 的 成 员 数 据 和 函数 。 
3.3.1 Node 类 的 成 员 数 据 
Node 类 的 主要 保护 成 员 数 据 ( 子 类 可 见 ，Protected 关 键 字 ) ， 如 表 3-1 所 示 。 


表 3-1 Node 类 的 主要 保护 成 员 数 据 


名 Ж 类 型 я Ж 
VAM ло ТА АУ zm E. ЕЕН, zh 


localZOrder ie Л] EEN TTA ES 
= i 顺序 决定 遮挡 关系 ， 是 本 地 > А 
_globalZOrder 全 局 z 轴 坐标 


vM A H E 7r 


^n ug E hh hi m 
Ad 22 Ин PLE 


running 


 1gnoreAnchorPointForPosition 


rotationX x 轴 角 度 制 的 节点 旋转 的 角度 值 
 potationY y 轴 角度 制 的 节点 旋转 的 角度 值 
x 轴 的 缩放 系数 
_scaleY y 轴 的 缩放 系数 


position (CCPoint ) 位 置 坐 标 


_skewX x 轴 的 扭曲 效果 的 系数 
 skewY y 轴 的 扭曲 效果 的 系数 
children „лы ЖОН 
(ЖЕ) 
名 HW 类 m я Ж 
visible 布尔 值 DREM IZR 
| 六 点 平移 或 移 位 时 的 锚 点 ，( 0.0 ) WEF, (11) 为 
anchorPoint à І 
А ^i E, (0.5,0.5) 为 中 心 
| | B Ж В (УШИН кА ЧА, np. UD 
 anchorPointInPoints из» d: ux 
需要 修改 ,请 修改 上 一 个 属性 
— Ур (Size) IRIE ARA СКАЙ, Ae). ЛИН xd 
contentSize V ize in bes td 
7 Au. бр АУ STARR 
position 点 坐标 HW ea A by 
| parent T ы! AC T A, 


| userObject х (CCObject) 类 似 上 一 个 属性 ， 存 储 了 ID 号 
 SshaderProgram OpenGL 程序 泻 染 参数 

 actionManager EHI 内 部 z HET. DEEE 
 eventDispatcher 事件 分 发 事件 分 发 

 actionManager 用 于 管理 所 有 动作 

кы. 调度 所 有 的 周期 性 更 新 


3.3.2 ”Node 类 的 函数 


Node 类 的 主要 遂 数 如 表 3-2 所 示 。 


表 3-2 ”Node 类 的 主要 函数 


函数 名 返回 类 型 ж ж 
获得 兄弟 节点 间 z 轴 顺序 (本 地 )， 需 要 注意 的 是 ， 为 了 保 


setLocalZOrder ШЕ 5 IH AA АУЕ ТЕ. setZOrder 依然 是 用， 调用 的 实际 是 
setGlobalZOrder 获得 兄 加 节点 间 z 轴 顺序 (全 局 ) 


ignoreAnchorPointForPosition 


НАН I 


getRotation 锋 得 旋转 角度 (角度 制 ) 
setRotation WP BB (角度 制 ) 
getScale 浮 点 型 АКЛАЙ ЛК Жс ЖА 
setScale V AR CAS AA 
getScaleX Ak fa. x НН ЛХ ЖЖ 
setScaleX Wt E x Bla s AX 
getScaleY TUN y 轴 缩放 系数 
setScaleY Ба y Blah A 
getPosition 获得 坐标 位 置 
setPosition 议 置 坐标 位 置 
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HAA 摘 述 
getPositionX AK fS x 坐标 值 
setPositionX 设置 x 坐标 值 
getPositionY -— 得 y 坐标 值 
setPositionY A у 坐标 值 
getSkewX Ak f. x 轴 扭 曲 效 果 系 数 
setSkewX Wt EL ЕРЕ Е 
getSkewY Xe y 轴 扭 曲 效 果 系 数 
setSkewY 设置 y 轴 扭 曲 效 果 系 数 
getChildren 获得 子 万 点 数组 
getChildrenCount 获得 于 三 点 数量 
isVisible 狭 得 是 否 可 见 
setVisible 这 置 是 否 可 见 


getAnchorPoint 
setAnchorPoint 
getAnchorPointInPoints 


cetContentSize 


JH EDU A 
设置 锚 点 相对 坐标 
获得 错 点 绝对 符 标 
Ak fa- ИП E BIA NIST 


setContentSize 设置 民 寸 大 小 
isRunning Ak fud H kA dE MEIT 
getParent AK f OC T A 
setParent VE M 


getlag 救 型 
setTag 
getUserData 
setUserData 
getUserObject 
setUserObject 


getActionManager 
setActionManager 
getScheduler 

setScheduler 
getShaderProgram 
setShaderProgram 

onEnter 
onEnterTransitionDidFinish 


onExit 


onExitTransitionDidStart 


addChild 


函数 名 
removeFromParentAndCleanup 
removeChild 
removeChildByTag 
removeAllChildrenWithCleanup 
getChildByTag 
reorderChild 


sortAllChildren 


cleanup 

draw 

visit 

runAction 

stopAllActions 
getActionByTag 

stopAction 

stopActionByTag 
getNumberOfRunningActions 
convertToNodeSpace 


convertToWorldSpace 


获得 标签 值 

设置 标签 值 

获得 用 户 数据 

设置 用 户 数据 

获得 用 户 数据 对 象 

设置 用 户 数据 对 象 

获得 动作 管理 对 象 

设置 动作 管理 对 象 

获得 调度 对 象 

设置 调度 对 和 象 

Wt BEI SC 4 

进入 节点 (场景 类 ) 的 对 象 
场景 等 切换 动画 播放 完毕 进入 
离开 节点 (场景 类 ) 的 对 象 
场景 等 切换 动画 播放 完毕 离开 
添加 子 节点 ， 参 数 可 以 加 入 > 轴 排 序 参 数 和 标签 值 ， 这 两 


是 可 选 的 
(Ж) 
描 Ж 
从 父 节 点 删除 本 节点 ， 参 数 决 定 是 否 清 除 本 节点 
删除 自动 节点 ， 参 数 为 节点 对 象 及 是 否 清除 本 节点 
根据 标签 值 删除 节点 ， 参 数 为 标签 及 是 否 清 除 本 节点 


删除 所 有 子 闻 点 ， 参 数 决 定 是 否 清除 本 市 点 

根据 标签 值 获得 子 节点 

根据 z 轴 值 重新 排列 子 节点 ， 参 数 为 节点 和 z 轴 值 

在 演 染 前 排列 所 有 节点 ， 可 以 被 reorderChild 和 addChild 


RE, АРЕ н — MEA TRIMAR, EUAS А 50 
ЎА 7] 


停止 所 有 的 动作 和 调度 

ЇН МЕРЕ 00 

35 1H 77м | RIT А mE] 
运行 动作 

结束 所 有 动作 


根据 动作 标签 获得 动作 

结束 动作 ， 传 人 的 参数 是 动作 指针 

根据 标签 值 结束 动作 

获得 运行 动作 数量 

转换 为 证 点 空间 坐标 ， 相 对 于 太后 的 左下 角 ， 与 锚 扩 无 关 
转换 为 世界 空间 (全 局 绝对 ) 坐标 ， 与 锚 点 无 关 


Hed кале ЇН] Aes. AENA Н ЇН ДЇ ЛЕНА ЕН EL 
相对 坐标 

转换 为 世界 空间 坐标 ， 传 入 仁和 输出 全 如 是 相对 于 锁 点 的 
相对 坐标 
convertTouchToNodeSpace 点 坐标 从 触 屏 对 象 转换 为 广 点 空间 坐标 

从 触 屏 对 象 转换 为 节点 空间 坐标 ,传人 值 和 输出 值 都 是 相 
对 于 锁 点 的 相对 坐标 
getNodeToParentAffineTransform 3 [n] А67 es A b ЯЛЕ а t [н] ЧАКЕ ERATES АНЕ 
getParentToNodeTransform iR [ALSO ess [н] ЖАКЕ ДЕҢ ТУ ка, ЧАКЕ БЕЛЕЕ S STAR [EE 
getNodeToWorldTransform 15 [n] Л. А6 s ка, a HE ЧА b BB [РЕ R38 8T 5B [E 
getWorldToNodeTransform 3 [п] A THEE Ab pg BAAT es УЕ ЕЛЕЙ Р DE 
setOpacity 放置 透明 度 
setColor 区 置 颜 色 


以 上 就 是 Node 类 的 部 分 函数 ， 其 中 不 包括 本 章 后 面 介 绍 的 调度 方面 的 函数 等 。 


convertToNodeSpaceAR 


convertToWorldSpaceAR 点 坐标 


convertTouchToNodeSpaceAR 点 坐标 


注意 ” 非 C++ 程 序 员 可 能 会 在 API 文 档 中 遇 到 陌生 的 virtual 修 饰 符 ， 其 修饰 的 结果 是 使 此 函数 为 虚 函 数 ， 虚 函数 必须 是 基 类 的 非 静 态 成 员 函 数 ， 其 访问 权限 可 以 是 protected 或 public， 实 现 多 态 性 ， 通 过 指 
向 派生 类 的 基 类 指针 ,访问 派生 类 中 同名 发 盖 成 员 函 数 。 


在 定义 了 虚 函 数 后 ， 可 以 在 基 类 的 派生 类 中 对 虚 函 数 重 新 定义 ， 在 派生 类 中 重新 定义 的 函数 应 与 虚 函 数 具 有 相同 的 形 参 个 数 和 形 参 类 型 ， 以 实现 统一 的 接口 ， 不 同 的 定义 过 程 。 如 果 在 派生 类 中 没有 对 
虚 函 数 重 新 定义 ， 则 它 继承 其 基 类 的 虚 函 数 。 简 而 言 之 ， 虚 函数 允许 在 程序 运行 过 程 中 根据 指针 的 类 型 动态 地 选择 它 调用 指针 类 型 的 函数 。 


在 Cocos2D-X 3.0 之 前 ， 关 于 节点 一 直 有 个 问题 ， 就 是 setOpacity 和 setColor 是 没有 节点 的 函数 ， 这 样 就 造成 了 在 调用 动作 的 时 候 节 点 的 某 些 动作 是 无 效 的 ， 比 如 Fadeln 和 FadeOut， 这 样 就 造成 了 节 
点 以 下 的 子 节 点 都 没有 了 效果 ， 想 调用 Fadeln 和 FadeOut 就 必须 使 用 Sprite， 在 3.0 版 本 中 重新 实现 了 setOpacity 和 setColor 国 数 ， 就 是 将 属性 传递 给 子 节 点 。 


3.3.3 ”实战 : 通过 节点 控制 屏幕 中 的 全 体 泻 染 对 象 


本 节 将 利用 目前 所 学 的 知识 做 一 些 有 趣 的 东西 。 之 前 说 过 ，Node 类 没有 贴图 ， 也 就 是 说 在 屏幕 上 单独 建立 一 个 节点 ， 是 没有 任何 效果 的 ， 但 是 可 以 通过 这 个 “无 形 ”的 节点 来 控制 屏幕 上 的 节点 。 现 在 
就 开始 吧 ! 


1. 加 入 节点 
新 建 一 个 项 目 ， 并 在 HelloWorldScene.cpp 文 件 中 的 init 函 数 中 做 如 代码 清单 3-2 所 示 的 修改 。 


代码 清单 3-2 ”加 入 节点 


// 
将 菜单 作为 子 节点 加 入 到 之 前 定义 的 节点 中 
anode-»addChild(pMenu, 1); 


"F4 
创建 标签 
LabelTTF* pLabel = LabelTTF::create("Hello World", "Thonburi", 34); 
pLabel-»5setPosition( ccp(size.width / 2, size.height - 20) ); 


A 
将 标签 作为 子 节点 加 入 到 之 前 定义 的 节点 中 
anode-»addChild(pLabel, 1); 
"à 
创建 精灵 
Sprite* pSprite = Sprite::create("HelloWorld.png"); 
pSprite-»5setPosition( Point(size.width/2, size.height/2) ); 
// 
将 背景 图 片 作 为 子 节点 加 入 到 之 前 定义 的 节点 中 
anode->addChild (pSprite, 0); 
return true; 


首先 通过 create 函 数 创 建 一 个 节点 anode， 把 anode 作 为 子 节点 ， 并 使 用 addChild 函 数 将 其 加 入 到 HelloWorld 的 场景 中 ; 然后 把 本 来 作为 子 节点 加 入 到 场景 类 对 象 中 的 对 象 作为 子 节点 加 入 到 anode 
中 。 这 些 对 象 包括 菜单 类 对 象 、 标 签 类 对 象 、 人 物 精灵 类 对 象 ， 这些 对 象 的 类 都 是 Node 类 的 子 类 。 如 果 目 前 对 这 些 对 象 的 使 用 不 了 解 ， 请 跳 过 这 些 对 象 的 使 用 ， 因 为 这 些 本 书 会 在 后 面 做 相应 的 讲解 。 


运行 项 目 ， 发 现 和 修改 前 的 项 目 并 无 区 别 ， 如 图 3-4 所 示 。 


图 3-4 加 入 节点 控制 的 项 目 运行 效果 


2. 改 变 位 置 
在 HelloWorldScene.cpp 文 件 中 的 init 方 法 中 作 如 代码 清单 3-3 所 示 的 修改 。 


代码 清单 3-3 ”修改 节点 位 置 


// 
设置 节点 位 置 


anode-»setPosition (Point (50,50)); 


运行 效果 如 图 3-5 所 示 。 


图 3-5 ”修改 节点 位 置 运行 效果 


可 以 看 到 ， 整 体 都 跟着 节点 移动 了 。 
3. 设 置 缩放 
修改 后 的 代码 如 代码 清单 3-4 所 示 ， 看 一 下 缩放 的 效果 。 


代码 清单 3-4 ”设置 缩放 代码 


// 
设置 缩放 


anode-»setScale (0.5); 


运行 效果 如 图 3-6 所 示 。 


图 3-6 ”整体 缩放 运行 效果 


最 后 再 来 试验 整体 旋转 ， 因 为 默认 锚 点 在 左下 角 ， 需 要 先 移动 整体 的 位 置 ， 否 则 整体 一 转 ， 屏 幕 中 将 只 看 见 黑屏 ， 如 代码 清单 3-5 所 示 。 


// 

设置 旋转 

anode-»setPosition (Point (200,200)); 
anode-»setRotation (90.0); 


注意 角度 度量 方式 设置 为 角度 制 。 运 行 效果 如 图 3- 7 所 示 。 


图 3-7 ”整体 旋转 运行 效果 


: 宇 洲 


本 节 介 绍 了 屏幕 中 演 染 对 象 的 基础 类 Node， 下 一 节 将 介绍 控制 游戏 显示 的 导演 类 


导演 类 Director 是 Cocos2D-X 游 戏 引 擎 的 核心 ， 它 创建 并 且 控 制 着 主屏 幕 的 显示 ， 同 时 控制 着 场景 的 显示 时 间 和 显示 方式 ， 在 整个 游戏 里 一 般 只 有 一 个 导演 。 游 戏 的 开始 、 结 束 、 暂 停 都 会 调用 


IRNI 


Director 类 的 方法 ，Director 类 负责 如 下 功能 。 
© 初始 化 OpenGIL 会 话 。 
- 设置 OpenGL 的 一 些 参 数 和 方式 。 
“ 访问 和 改变 场景 ， 并 访问 Cocos2D-X 的 配置 细节 。 
` 访问 视图 。 
“ 设置 投影 和 朝向 。 


需要 说 明 的 是 ，Director 是 单 例 模式 ， 所 以 调用 Director 方 法 的 标准 方式 如 下 。 


Director::getInstance()-» 


Director 类 的 继承 关系 如 图 3-8 所 示 。 


ector 


irector 


图 3-8 ”Ditectot 类 的 继承 方式 


DisplayLinkDirector 继 承 了 Director， 是 一 个 可 以 自动 刷新 的 导演 类 。 它 只 支持 1/60、1/30 和 1/15 三 种 动画 间隔 ( 帧 间隔 ) 。 


这 也 


在 Cocos2D-X 中 ， 在 游戏 的 任何 时 间 ， 只 有 一 个 场景 对 象 实例 处 于 运行 状态 ， 而 导演 就 是 流程 的 总 指挥 ， 它 负责 游戏 全 过 程 的 场景 切换 ， 这 也 是 典型 的 面向 对 象 和 分 层 的 设计 原则 。 下 面 分 别 介 
Director 类 的 成 员 数 据 和 函数 。 


3.4.1 ”Director 类 的 成 员 数 据 


Director 类 的 主要 保护 成 员 数 据 如 表 3-3 所 示 。 


名 Ж 
Scheduler 
 actionManager 
 eventDispatcher 
| paused 
 runningScene 
 nextScene 
. deltaTime 


 winSizeInPoints 


表 3-3 Directot 类 的 主要 保护 成 员 数 据 


类 型 HA Y 
АЕ. 绑 定 导演 类 的 调度 对 象 


绑 定 导演 类 的 动作 管理 对 象 
绑 定 导演 类 的 事件 调度 对 象 
тп 导演 是 运行 还 是 暂停 
下 在 运行 的 场景 类 

下 一 个 场景 类 
帧 间隔 的 时 间 
尺寸 坐标 点 型 的 屏幕 尺寸 


Director 类 并 没有 公共 型 的 成 员 数 据 ， 因 此 这 些 属性 都 不 可 以 直接 得 到 。 


3.4.2 Director 类 的 国 数 


Director 类 的 主要 公共 函数 如 表 3-4 所 示 。 


函数 名 
getRunningScene 
getAnimationInterval 
setÀnimationInterval 
1isDisplayStats 
setDisplayStats 
getSecondsPerFrame 


getOpenGLView 
setOpenGLView 


isPaused 
getTotalFrames 
getProjection 
setProjection 
getNotificationNode 


getWinSize 
getWinSizeInPixels 


convertToGL 
convert ToUI 
runWithScene 
popsScene 


pushScene 


表 3-4 Ditectot 类 的 主要 公共 函数 


获得 当前 正在 运行 的 场景 


RE MORE 
ТТЕП 


iR [n] Ze t ТЕВЕ Ат. ЁЛУ ЖЕШ НУН] ЇН] 


设置 是 否 在 屏幕 左下 角 显 示 每 帧 的 时 间 
获得 每 帧 的 时 间 (单位 为 秒 ) 


i 


获得 给 制 了 所 有 对 得 的 OpenGL 视图 
A EL Eel PUE 2. OpenGL 视图 


获得 导演 类 对 象 是 否 暂 停 
从 导演 类 开始 运行 的 帧 数 
获得 OpenGL 的 投影 
没 置 OpenGL 的 投影 


获得 一 个 节点 对 象 ， 这 个 节点 对 象 在 主场 景 被 遍历 后 再 被 遍历 


获得 屏幕 大 小 ， 单 位 为 点 


尺寸 获得 像素 级 的 屏幕 大 小 ， 单 位 为 像素 ， 只 是 视网膜 版 本 与 getWinSize 
| HJE PHEA fF] 


从 UI 体系 的 坐标 转换 为 OpenGL 的 坐标 
А OpenGL 的 坐标 转换 为 UI 体系 的 坐标 
运行 当前 的 场景 


"IET NETUS 


SEANAR, EARP 


popToRootScene 25 

replaceScene 
end 23 

pause + 

resume 

stopAnimation 

startÀnimation 

drawScene 


purgeCachedData 
setGLDefaultValues 


Er RE [OE [E | OF | UE | For | H 


setAlphaBlending 
setDepthTest 2 


S 
Im 


getEventDispatcher 
setEventDispatcher 


getActionManager АЕТ 


|а и 
а РА 


setActionManager 


getScheduler 调度 
setScheduler 2% 


在 2.0 之 前 的 版 本 中 ， 曾 经 有 设置 导演 类 的 函数 ， 有 四 个 导演 类 型 ， 分 别 是 kKCCDirector-TypeNSTimer、kCCDirectorTypeMainLoop 


kCCDirectorTypeDisplayLink。 但 是 在 2.0 版 本 以 后 ， 这 个 函数 已 经 成 为 历史 了 。 


3.4.3 实战: Director 类 的 使 用 


弹出 所 有 上 场景， 和 耳 到 根 场 景 
EH UE Ss 

结束 游戏 

暂停 场景 

ЩН ЖЕТЕН ык. SOBRE [8] V] BE Gs ECT CGU 
Fr Ez 

开始 动画 

рр 

清除 缓存 数 据 

将 OpenGL 参数 设置 为 默认 仁 
设置 OpenGL 3:777 Alpha 通道 
Ux EL ЛЕ d A DR 

3k fg sp- PES] ДЕ А] @ 
设置 事件 调度 对 象 

3K I SIME HR BID AR 

D ELTE E AUI S 

获得 调度 对 象 

i LIA REIR 


由 于 Director 类 是 一 个 控制 的 类 别 ， 从 创建 项 目的 模板 中 就 可 以 看 到 Director 类 在 游戏 初始 化 的 应 用 ， 如 代码 清单 3-6 所 示 。 


代码 清单 3-6 ”Director 类 在 游戏 初始 化 的 应 用 


bool AppDelegate::applicationDidFinishLaunching() { 
/ 


获得 导演 类 
auto director = Director::getInstance(); 
// 

设置 OpenGL 

视图 


auto glview = director-»getOpenGLView (); 
if(!glview) { 

glview = GLView::create("Cpp Tests"); 
director-»setOpenGLView (glview); 


} 
Р Ө 
设置 是 否 显示 每 帧 时 间 
director -»setDisplayStats (true); 
// 
设置 每 帧 时 间 
director ->setAnimationInterval(1.0 / 60) 


Scene *pScene = HelloWorld:: create (); 
// 
运行 场景 
director ->runWithScene (pScene); 
return true; 


这 段 代 码 出 自 AppDelegate.cpp 文 件 中 的 applicationDidFinishLaunching 函 数 ， 首 先 获得 导演 类 指针 ， 然 后 设置 OpenGL 视 图 ， 设 置 是 否 显示 每 帧 时 间 ， 设 置 每 帧 时 间 ， 然 后 创建 并 


X 


始 化 工作 就 完成 了 。 


如 代码 清单 3-7 所 示 ， 在 游戏 进入 后 台 或 者 从 后 台 返 回 时 ， 分 别 调用 相应 的 方法 停止 动画 和 开始 动画 。 


代码 清单 3-7 ”游戏 进入 后 台 或 者 从 后 台 返 回 时 导演 类 的 工作 


void AppDelegate::applicationDidEnterBackground() { 
Director::getInstance()-»stopAnimation(); 


void AppDelegate::applicationWillEnterForeground() { 
Director::getInstance()-»startAnimation(); 


) 


当 手 机 有 外 部 事件 进入 时 ， 也 会 将 当前 界面 暂停 ， 比 如 来 电话 的 时 候 。 


在 游戏 结束 的 时 候 ， 同 样 需 要 使 用 导演 类 的 结束 函数 ， 如 代码 清单 3-8 所 示 。 


代码 清单 3-8 ”导演 类 的 结束 方法 


void HelloWorld: :menuCloseCallback (CCObject* pSender) 
{ 


Director::getInstance()-»^end(); 


. kCCDirectorType-Thread Маіпіоор, 


s= 


15147 


Ms. DUREE 


#if (CC TARGET PLATFORM == CC PLATFORM IOS) 

exit (0); 
dendif 
} 


从 以 上 例子 可 以 看 出 ， 导 演 类 就 是 一 个 管理 游戏 的 指挥 官 。 之 后 还 会 接触 一 些 Director 类 的 用 法 ， 包 括 坐标 的 转换 等 ， 会 在 触摸 事件 那 部 分 做 详细 介绍 。 


3.5 ”场景 类 


Scene 类 是 Node 的 子 类 ， 和 Node 相 比 ， 它 只 是 添加 了 一 个 特性 ， 就 是 拥有 自己 的 销 点 ， 位 置 在 屏幕 的 正中 央 ， 除 此 之 外 它 目前 还 没有 额外 的 功能 ， 只 是 一 个 抽象 的 概念 


"Cerne 
TransitionScene 
Transition CrossFade 


TransitionF ade 


TransitionFadeTR 


TransitionJjumpZoom 


TransitionMovelInL 


TransitionPage Turn 


Transition Progress 


TransitionRotoZoom 


TransitionSceneOriented 


TransitionShrinkGrow 


TransitionSlideInL 


TransitionSplitCots 


TransitionTurnO ff Tiles 


图 3-9 Scene 类 继承 关系 
介绍 Node 类 时 ， 把 屏幕 上 所 有 显示 对 象 的 父 节点 设置 为 我 们 定义 的 节点 ， 这 个 父 节点 的 角色 一 般 由 场景 承担 。Scene 类 的 继承 关系 图 如 图 3-9 所 示 。 
可 以 看 到 ，Scene 类 有 TransitionScene (切换 场景 类 ) ， 并 且 TransitionScene 类 有 很 多 子 类 ， 这 些 类 都 用 于 切换 场景 的 特效 ， 在 本 节 的 后 面 会 介绍 。 
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注意 ”一般 的 游戏 都 会 出 现 这 种 情况 ， 当 切换 场景 时 ， 程 序 会 由 于 旧 场 景 内 存 的 没有 释放 并 且 新 场景 已 经 载 入 ， 而 出 现 短暂 的 “峰值 ”， 但 是 不 必 为 此 而 做 额外 的 工作 ， 因 为 Cocos2D-X 引 擎 会 清除 旧 


序 会 由 
场景 的 内 存 。 但 是 要 注意 ， 正 确 使 用 内 存 的 保留 与 释放 (这 点 会 在 后 面 介 绍 ; ， 尤 其 使 用 场景 切换 特效 的 时 候 ， 尽 早上 机 测试 以 及 合理 的 内 存 使 用 ， 是 你 要 做 的 工作 。 
下 面 来 看 Scene 类 在 游戏 中 的 使 用 和 场景 切换 特效 。 
3.5.1 如 何 新 建 一 个 场景 
下 面 通 过 HelloWorld 项 目 中 新 建 场景 的 过 程 来 介绍 使 用 场景 的 过 程 。 
1. 定 义 一 个 场景 类 实例 
在 Cocos2D-X3 引 擎 中 的 HelloWorld 范 例 中 ，HelloWorldScene.cpp 中 的 scene 函 数 就 是 新 建 场景 的 地 方 ， 如 代码 清单 3-9 所 示 。 
代码 清单 3-9 ”HelloWorld 新 建 场景 类 实例 
= HelloWorld: :scene () 
КИЕК 


Scene *scene = Scene::create(); 
//CCScene *scene = CCScene: :node () ; 


2 Jl 
定义 布景 层 
HelloWorld *layer = HelloWorld::create(); 
// 
将 布景 层 加 入 场景 
scene-»addChild (layer); 
/ 
返回 场景 类 


return scene; 


通过 create 方 法 构造 一 个 场景 ， 当 然 ，create 国 数 是 Cocos2D-X 2.0 以 后 的 版 本 才 有 的 方式 ，2.0 之 前 的 版 本 采用 的 后 面 被 注释 掉 的 方法 ， 然 后 将 定义 的 布景 层 作 为 子 项 加 入 到 场景 中 ， 要 显示 的 成 员 都 
在 布景 层 中 ， 至 于 布景 层 的 定义 ， 将 在 后 面 介绍 。 
2. 获 得 并 运行 场景 

在 游戏 入 口 AppDelegate.cpp 类 中 的 applicationDidFinishLaunching 函 数 中 调用 上 一 步 定 义 的 方法 ， 并 使 用 导演 类 的 runWithScene 方 法 运行 场景 ， 如 代码 清单 3-10 所 示 。 


代码 清单 3-10 ”获得 并 运行 场景 


bool AppDelegate::applicationDidFinishLaunching() { 


初始 化 导演 类 
auto director = Director::getInstance(); 
// 

设置 OpenGL 

视图 


auto glview = director-»getOpenGLView (); 


// 
设置 是 否 显示 每 帧 时 间 


е -»setDisplayStats (true); 


ui P 


л -»setAnimationInterval(1.0 / 60); 


创 T 


Scene *pScene - HelloWorld::scene(); 


运行 场景 
pDirector-»runWithScene (pScene); 
return true; 


IP 


到 这 里 已 经 可 以 新 建 一 个 场景 并 把 它 加 入 到 游戏 中 了 。 


一 般 来 讲 ， 游 戏 都 会 有 多 个 场景 组 成 ， 至 少 会 有 菜单 场景 和 游戏 场景 ， 更 复杂 的 游戏 甚至 会 有 更 多 


3.5.2 场景 的 切换 


tests 项 目 是 Cocos2D-X 的 功能 示例 ， 对 于 Cocos2D-X 的 初学 者 来 说 ， 看 tests 项 目 中 的 示例 并 理解 它们 是 个 不 错 的 学 习 方 式 ， 本 节 


游戏 入 口 AppDelegate 类 中 的 applicationDidFinishLaunching 国 数 如 代码 清单 3-11 所 示 。 


代码 清单 3-11  applicationDidFinishLaunchingeRZ 


bool AppDelegate::applicationDidFinishLaunching() 
{ 


auto director = Director::getInstance(); 


director-»setOpenGLView (&CCEGLView::sharedOpenGLView()); 


// 
设置 是 否 显示 每 帧 时 间 
director-»setDisplayStats (true); 


y 
设置 每 帧 时 间 
director-»setAnimationInterval(1.0 / 60); 
// 
创建 场景 
Scene * pScene = Scene: :create (); 
Layer * pLayer = new TestController(); 
pLayer-»autorelease(); 
рѕсепе->ааасћі1а (pLayer); 
// 


运行 场景 
pDirector-»runWithScene (pScene); 
return true; 


rp 


和 上 一 节 的 applicationDidFinishLaunching 有 一 点 区 别 ， 它 的 定义 场景 和 给 场景 加 层 的 操作 都 在 这 个 函数 里 完成 ， 但 是 本 质 上 是 类 似 的 。 下 面 就 来 看 在 TestController 布 景 层 里 面 是 如 何 调用 下 一 级 场 


切换 场景 这 个 事件 应 该 是 在 按 下 主 菜单 上 的 按键 后 发 生 的 ， 于 是 找到 controller.cpp 文 件 中 的 menuCallback 浮 数 ， 它 


跳 过 ， 后 面 会 进 解 这 个 问题 。 
menuCallback 国 数 如 代码 清单 3-12 所 示 。 


代码 清单 3-12 ”menuCallback 函 数 代 码 


void TestController::menuCallback(Ref * sender) 


{ 


Director::getInstance ()-»purgeCachedData (); 
auto menuIltem = static cast«MenuItem *» (sender); 
int idx = menultem-»getLocalZOrder() - 10000; 


获得 场景 
scene = д aTestNames [idx].callback(); 


EM mds 
if (scene) 
{ 


scene-»runThisTest (); 
scene-»release(); 


ГЕНУЕ ВАЗЕ ҢЈру2, KOSANI, mztcontroller.cppxcftrhzE У АУСгеаїіеТеѕіЅсепер& 5х 


В5с18СгеаїеТеѕіЅсепер& %, И n3;5583- 139mm. 


代码 清单 3-13 СгеаїеТеѕіЅсеперА 


static TestScene* CreateTestScene (int nIdx) 


CCDirector: :getInstance ()-»purgeCachedData(); 
TestScene* pScene = NULL; 


/ / 

创建 不 同 的 布景 层 

switch (nīIdx) 

{ 

case TEST ACTION MANAGER: 
pScene = new ActionManagerTestScene (); 
break; 


// 

中 间 部 分 的 代码 过 长 ， 省 略 到 这 部 分 
// 

完整 代码 请 参考 Cocos2D-X 


目录 下 tests 
项 目的 controller .cpp 


default: 
break; 


return pScene; 


上 面 代码 省 略 中 间 的 部 分 ， 首 先 调 用 导演 类 的 清除 缓存 函数 ， 


然后 新 建 场景 ， 并 返回 场景 。 


就 通 


场景 ， 如 何在 场景 间 切 换 呢 ?下 一 节 将 通过 引擎 


甬 过 tests 来 介 


# 自 带 的 tests 例 子 来 学 习 。 


i 绍 场景 间 的 切换 。 


是 自 定义 的 一 个 回调 函数 ， 在 定义 布景 层 时 定义 ， 如 果 不 理 解 这 


然后 调用 场景 的 runThisTest 销 数 ， 这 是 


一 点 I 没关系 NI 请 


关于 场景 的 定义 ， 我 们 来 看 一 下 ActionManagerTestScene 类 的 定义 。ActionManagerTest.h 文 件 中 的 ActionManagerTestScene 类 的 定义 如 代码 清单 3-14 所 示 。 


代码 清单 3-14 ActionManagerTestScene 类 的 定义 


class ActionManagerTestScene : public TestScene 
{ 
public: 

virtual void runThisTest(); 


}; 


ActionManagerTest.cpp 文 件 中 的 runThisTest 函 数 的 定义 如 代码 清单 3-15 所 示 。 


代码 清单 3-15 ”runThisTest 函 数 的 定义 


void ActionManagerTestScene::runThisTest () 


{ 


Layer* player = nextActionManagerAction(); 
addChild (player); 
CCDirector::getInstance ()->replaceScene (this); 


) 


这 里 做 的 就 是 把 布景 层 加 入 到 场景 中 ， 并 把 场景 通过 导演 类 的 replaceScene 将 当前 场景 蔡 换 成 新 场景 。 

总 结 以 上 过 程 分 为 以 下 三 步 : 

1) 调用 Director:getlnstance () ->purgeCachedData () 清空 缓存 。 

2) 新 建新 场景 。 

3) 调用 Director:getlnstance () -»replaceScene (this) 替换 新 场景 。 

Cocos2D-X 提 供 了 场景 间 切 换 的 特效 ， 下 一 节 将 会 介绍 这 些 内 容 。 

注意 ”不 要 在 节点 初始 化 的 init 函 数 中 调用 teplaceScene 函 数 ， 时 演 类 不 允许 在 一 个 节点 初始 化 时 调用 场景 切换 ， 这 样 会 导致 程序 前 渍 。 


这 里 说 一 下 压 入 场景 pushScene 和 弹出 场景 popScene。 它 们 也 可 以 显示 场景 、 保 留 当 前 场景 和 显示 新 场景 ， 不 同 的 是 它们 不 把 旧 场 景 从 内 存 中 释放 掉 ， 因 为 这 样 可 以 提高 加 载 速度 。 但 是 这 时 需要 注 
意 ， 如 果 内 存 不 足以 支撑 ， 则 请 采用 replaceScene 函 数 。 


3.5.3 ”场景 间 切 换 的 动画 


3.5.2 节 介绍 了 场景 间 的 切换 ， 我 们 使 用 replacescene 切 换 场 景 。 很 多 时 候 ， 我 们 为 了 游戏 效果 ， 使 UI 更 有 动态 效果 ， 会 在 切换 界面 的 过 程 中 加 入 一 些 过 程 动画 ， 例 如 平移 切换 场景 动画 ( 见 图 3-10) , 
旋转 切换 场景 动画 如 图 3-11 所 示 。 


图 3-10 平移 切换 场景 动画 


正常 的 无 过 渡 场 景 ， 如 果 尚 未 建立 场景 ( 即 游戏 中 的 第 一 个 场景 ) ， 使 用 runWithScene 水 数 即 可 以 使 用 相应 场景 ， 如 果 是 蔡 换 场景 ， 则 使 用 replaceScene 函 数 蔡 换 相应 的 场景 即 可 ;如果 要 使 用 场景 


旋转 切换 场景 动画 


间 的 切换 效果 ， 则 需要 使 用 相应 的 切换 类 即 在 3.1 节 中 介绍 的 Transitionscene 子 类 的 create 国 数 (2.0 版 本 之 前 是 transitionWithDuration 函 数 ) 生成 相应 场景 。 当 然 ， 不 同 效果 的 使 用 方法 略 有 不 同 。 


通过 replaceScene 函 数 启动 场景 ， 也 就 是 说 给 这 个 场景 加 一 个 外 包装 类 ， 然 后 再 启动 。 那 么 这 个 


一 般 情况 下 ，TransitionScene 子 类 的 create 国 数 有 两 个 参数 : 第 一 个 参数 是 特效 的 切换 时 间 ， 直 接生 成 一 个 Time 类 即 可 ， 例 子 中 设 定 的 时 间 是 1~2 秒 ， 对 于 很 多 场景 的 显示 都 很 舒服 ， 也 可 以 根据 要 求 


修改 切换 时 间 ; 第 二 个 参数 是 要 进入 的 场景 。 有 的 会 有 第 三 个 参数 ， 如 表 3-5 所 示 。 


d E] 类 ж 


TransitionJumpZoom 


TransitionFade 


x 轴 平 移 移 动 TransitionFlipX 


y 轴 平 移 移 动 TransitionFlipY 
水 平角 度 翻转 
市 缩放 效果 ，x 轴 平 移 | TransitionZoomFlipX 


市 缩放 效果 ，y 轴 平 移 | TransitionZoomFlipY 


ali An UU yes 


TransitionFlipAngular 


TransitionZoomFlipAngular 


场景 就 不 是 直接 显示 了 ， 而 是 在 场景 的 效果 动画 播 完 以 后 进入 场景 ， 起 到 过 渡 的 效果 。 


表 3-5 切换 场景 动画 类 


是 否 有 第 三 个 参数 和 第 三 个 参数 功能 


无 


为 渐变 的 颜色 ， 如 white 


TransitionScene::Orientation::LEFT OVER: 问 左 平移 
TransitionScene::Orientation: RIGHT OVER: 回 右 平移 
TransitionScene::Orientation::UP OVER: 同上 平移 
TransitionScene::Orientation:DOWN OVER: 回 下 平移 
TransitionScene::Orientation::LEFT OVER: 回 左 翻 
TransitionScene::Orientation:RIGHT OVER: 问 右 翻 
TransitionScene::Orientation::LEFT OVER: 癌 左 平移 
TransitionScene::Orientation: RIGHT OVER: 回 右 平移 
TransitionScene::Orientation::UP OVER: 同上 平移 
TransitionScene::Orientation: DOWN OVER: 问 下 平移 
TransitionScene::Orientation::LEFT OVER: 回 左 翻 
TransitionScene::Orientation::RIGHT OVER: 问 右 翻 


ШШ у 
Mr s M ERE AT us d 
新 场景 从 右 移 人 覆盖 X 
Ar № В ЛА i 无 
WE SEM T E ACRES X 
场景 从 左 移入 推出 原 场景 X 
场景 从 右 移入 推出 原 场景 X 
场景 从 上 移入 推出 原 场景 X 
(Ж) 
zj m 是 否 有 第 三 个 参数 和 第 三 个 参数 功能 
场景 从 下 移入 推测 原 场景 X 
向 右上 波浪 X 
向 左下 波浪 X 
и ЕТИШ п 
EET i 
随机 小 方块 切换 X 


false: Bj d 


$3] va TransitionPageTurn pd 
true: Jr dil 


其 中 ，TransitionPageTurn 类 需要 先 设置 摄像 机 ， 方 法 如 下 。 


Director: :getInstance ()->setDepthTest (true); 


表 3-6 为 需要 检测 OpenGL 版 本 的 切换 场景 动画 。 


表 3-6 ”需要 检测 OpenGIL 版 本 的 切换 场景 动画 


动 E] 类 ж 
淡出 淡 入 交 义 ， 同 时 进行 TransitionCrossFade 


tests 项 目的 TransitionsTest 文 件 夹 中 是 场景 切换 的 示例 。 切 换 场景 动画 的 使 用 步骤 如 下 。 

1) 新 建 场景 。 

2) 根据 需要 的 新 建 场景 的 切换 动画 选择 TransitionScene 子 类 ， 通 过 create 将 之 前 建 的 场景 传 入 其 中 ， 并 设置 其 他 参数 。 
3) 调用 Director:getlnstance () -»replaceScene (用 上 一 步 中 定义 的 TransitionScene 的 子 类 ) 蔡 换 新 场景 。 


下 一 节 开 始 介 绍 布景 层 Layer 类 。 


3.6 布景 层 类 


布景 层 类 Layer 是 Node 的 子 类 ， 每 个 游戏 场景 中 可 以 有 很 多 层 ， 每 一 层 负责 各 自 的 任务 ， 例 如 专门 负责 显示 地 图 的 背景 、 专 门 负责 显示 敌人 、 专 门 负责 机 关 和 专门 负责 主角 等 ; 每 一 层 上 可 以 放置 不 同 
的 元 素 ， 包 括 文本 、 精 灵图 片 和 菜单 等 。 通 过 层 与 层 之 间 的 组 合 关 系 ， 就 可 以 构成 游戏 显示 的 界面 Ul 中等， 当然 为 了 看 到 每 一 层 的 东西 ， 把 一 些 层 设置 为 透明 或 半 透 明 的 ， 就 可 以 看 到 不 同 布景 层 芍 加 到 一 
起 的 效果 了 ，Layer 类 的 继承 关系 如 图 3-12 所 示 。 


Ref 


图 3-12 Layer 类 继承 关系 


由 图 3-12 可 以 看 出 Layer 继 承 自 Node 类 ， 并 且 Layer 还 遵照 触 屏 代理 协议 、 加 速度 传感器 代理 协议 、 键 盘 时 间 代 理 协 议 等 ， 除 此 之 外 Layer 类 还 有 子 类 ， 如 图 3-13 所 示 。 


aye RGBA | | газам 
Teview || LyerOmdient 


Control ColourPicker 
ControlHuePicker 


ControlPotentiometer 


ControlSlider 
ControlStepper 


ControlSwitch 


TULIT 


3-13 ”Layer 的 子 类 


这 些 子 类 的 功能 如 表 3- 7 所 示 。 


表 3-7 Layet 子 类 的 功能 


п" 名 
LayerColor 
MultipleLayer 
Menu 

Control 


ScrollView 


功 


шр 
(Co 


实现 CCRGBAProtocol 协议 ， 可 设 
它 可 以 将 它 和 子 布景 层 结 合 在 一 起 
UI 控 件 ， 这 套 UI 系统 已 


经 废弃 


支持 Cocos2D-iPhone 的 滚动 视图 


置 层 的 颜色 和 不 透明 度 


Layer 和 Node 有 所 不 同 ， 在 3.0 版 本 之 前 主要 是 Layer 可 以 接受 事件 ， 但 是 3.0 之 后 Node 也 可 以 接受 事件 ， 二 者 最 大 的 不 同 就 是 Layer 默 认 是 忽略 销 点 的 。 


首先 来 看 Layer 的 使 用 ， 然 后 再 来 看 主要 的 子 类 使 用 。 


3.6.1 Layer 类 的 函数 


Layer 类 的 主要 国 数 如 表 3-8 所 示 。 


函数 名 
init 
onEnter 
onExit 


onEnterTransitionDidFinish 


43-8 Layer 类 主要 函数 
返回 类 型 


布尔 型 


fü 
JARE Layer 
进入 布景 层 时 被 调用 
离开 布景 层 时 被 调用 
才 场 动画 结束 时 调用 


x 


来 看 一 下 Cocos2D-X 项 目下 HelloWorld 项 目 中 的 HelloWorldscene.cpp 文 件 ，scene 国 数 定 义 Layer 类 并 把 它 加 入 到 场景 中 ， 如 代码 清单 3-16 所 示 。 


代码 清单 3-16 定义 的 Layer 类 并 把 它 加 入 到 场景 中 


CCScene* HelloWorld: 
{ 


新 建 场 信 类 实 人 
Scene *scene = Scene: 
// 
定义 布景 层 
HelloWorld *layer = HelloWorld::create(); 
/ / 
将 布景 层 加 入 场景 
scene-»addChild (layer); 
/ / 
回 场景 类 


return scene; 


:Scene () 


:create(); 


s 


Layer 类 的 init 函 数 在 创建 布景 层 时 被 调用 ， 如 代码 清单 3-17 所 示 。 


代码 清单 3-17 ” Layer 类 的 init 函 数 


bool HelloWorld::init() 
{ 


!Layer::init() ) 


return false; 


} 


return true; 


具体 显示 在 层次 上 的 对 象 将 在 后 面 介绍 ， 


3.6.2 ”颜色 布景 层 类 LayerColor 


颜色 布景 层 类 LayerColor 是 Layer 的 子 类 ， 包 含 Layer 类 的 特性 ， 并 且 有 两 个 拓展 功能 


首先 看 LayerColor 类 的 定义 初始 化 ， 如 代码 清单 3-18 所 示 。 这 


代码 清单 3-18 ”LayerColor 类 的 定义 初始 化 


目前 只 要 了 解 在 init 函 数 中 定义 要 显示 的 对 象 并 把 它 作为 子 类 加 入 到 场景 中 。 本 节 后 面 将 介 红 


: 为 布景 层 增 添 颜色 以 及 设置 不 透明 度 。 


段 代 码 是 tests 项 目下 LayerTest cpp 文 件 中 LayerTest1 的 onEnter 函 数 。 


如 Layer 的 子 类 。 


LayerTest::onEnter(); 


auto listener = EventListenerTouchAllAtOnce::create(); 
listener-»onTouchesBegan = 

CC CALLBACK 2(LayerTestl::onTouchesBegan, this); 
listener-»onTouchesMoved = 

CC CALLBACK 2(LayerTestl::onTouchesMoved, this); 
listener-»onTouchesEnded = 

CC CALLBACK 2(LayerTestl::onTouchesEnded, this); 

/ / 

注册 监听 

_eventDispatcher->addEventListenerWithSceneGraphPriority ( 
listener, this); 


// 


获得 屏幕 尺寸 


auto s = Director::getInstance()-»getWinSize(); 


auto layer - LayerColor::create( 

Color4B(OxFF, 0x00, 0x00, 0x80), 200, 200); 
layer-»ignoreAnchorPointForPosition (false); 
layer-»setPosition( Point(s.width/2, s.height/2) ); 
addChild(layer, 1, kTagLayer); 


create 函 数 的 第 一 个 参数 是 颜色 的 argb 值 ， 使 用 ccc4 定 义 ， 其 中 第 一 个 参数 是 颜色 a 值 ， 第 二 个 参数 是 r 值 ， 第 三 个 参数 是 g 值 ， 最 后 一 个 参数 是 b 值 。 除 此 之 外 ，create 函 数 的 后 两 个 参数 是 布景 层 的 宽 


和 高 。 


另外 ， 使 用 gnoreAnchorPointForPosition 将 是 否 忽 略 锚 点 置 为 false， 由 于 是 否 忽略 锚 点 的 默认 值 是 true， 也 就 是 忽略 销 点 ， 而 以 左下 角 为 锚 点 。 可 以 让 布景 层 考虑 锚 点 的 影响 (关于 镭 点 在 之 前 已 经 
介绍 过 ) ， 这 时 默认 的 锚 点 在 中 心 。 运 行 效果 如 图 3-14 所 示 。 


olorLayer resize (tap & move 


MainMenu 


图 3-14 定义 颜色 布景 层 的 显示 效果 


另外 ，LayerTest cpp 文 件 中 的 LayerTest1 的 updatesize 国 数 中 ， 可 以 修改 颜色 布景 层 的 大 小 ， 如 代码 清单 3-19 所 示 。 


void LayerTestl::updateSize(Point &touchLocation) 


{ 


auto s = Director::getInstance()-»getWinSize(); 


// 
设置 大 小 

auto newSize = Size( fabs(touchLocation.x - s.width/2)*2, 
fabs (touchLocation.y - s.height/2)*2); 


// 
获得 之 前 创建 的 层 
auto 1 = (LayerColor*) getChildByTag (kTagLayer); 


// 
设置 新 的 大 小 


l->setContentSize( newSize ); 
} 


通过 setContentsize 可 以 设置 颜色 布景 层 的 大 小 。 对 于 LayerColor 类 来 说， 还 有 一 个 比较 常用 的 国 数 setBlendFunc， 可 以 让 布景 层 的 颜色 混合 ， 关 于 混合 将 在 第 4 章 详细 介绍 。 代 码 清单 3-20 中 是 tests 
项 目 LayerTestBlend 类 中 的 newBlend 隐 数 ， 就 是 使 用 setBlendFunc 的 示例 。 


void 


{ 


ayerTestBlend: :newBlend (float dt) 


auto layer = (LayerColor*)getChildByTag (kTagLayer); 
GLenum src; 

GLenum dst; 

// 

1 


设置 混合 方式 
if( layer-»getBlendFunc().dst == GL ZERO ) 
{ 


src = GL SRC ALPHA; 
dst = GL ONE MINUS SRC ALPHA; 
} 
else 
{ 
src = GL ONE MINUS DST COLOR; 
dst = GL ZERO; 


} 

BlendFunc bf = (src, dst); 
layer-»setBlendFunc( bf ); 

} 


传 入 的 参数 是 一 个 有 起 始 效 果 和 结束 效果 的 参数 ， 运 行 之 后 的 效果 如 图 3-15 和 图 3-16 所 示 。 


ColorLayer: blend 


MainMenu 


图 3-15” 传 入 参数 GL_SRC_ALPHA 时 的 效果 


ty 


-—— 
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um 


3-16 ” 传 入 参数 GI ONE, MINUS DST COLORRJ $4 zi 5 


LayerColor 类 作为 


个 带 颜色 的 布景 层 ， 在 开发 中 可 以 给 我 们 作 特 效 带 来 方便 。 


游戏 中 常用 的 菜单 如 图 3-17 所 示 ， 其 中 菜单 项 可 以 是 图 片 、 系 统 字 ， 或 者 自 定义 的 字体 ,菜单 类 在 最 新 的 引擎 版 本 中 已 经 不 推荐 使 用 。 
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图 3-17 游戏 中 常用 的 菜单 示例 


Menu 是 一 个 菜单 项 的 容器 ， 用 来 装载 各 种 菜单 项 。 代 码 清单 3-21 就 是 一 个 定义 Menu 类 实例 的 过 程 ， 是 tests 项 目 中 MenuTest.cpp 的 MenuLayer2 的 构造 函数 。 


MenuLayer2::MenuLayer?2() 


{ 


for( int i=0;i < 2;i++ ) 


ee A // 
创建 菜单 项 


to iteml = MenuItemImage: :create(s PlayNormal, s PlaySelect, 
LLBACK 1(MenuLayer2::menuCallback, this)); 
to item2 = MenultemImage::create(s HighNormal, s HighSelect, 
LLBACK 1 (MenuLayer2::menuCallbackOpacity, this)); 

to item3 = MenuItemImage::create(s AboutNormal, s AboutSelect, 
. CALLBACK 1(MenuLayer2::menuCallbackAlign, this)); 
teml-»setScaleX( 1.5f ); 

tem2-»setScaleX( 0.5f ); 

tem3-»setScaleX( 0.5# ); 


ое 
Q 
D 


ое 
Q 
D 


ое 


- н-нын: @а@ 0) (Q0 D 


М. 


创建 菜单 
auto menu = Menu: :create (iteml, item2, item3, NULL); 
auto s = Director::getInstance()-»getWinSize(); 

menu-»setPosition (Point(s.width/2, s.height/2)); 

menu-»setTag( kTagMenu ); 
addChild (menu, 0, 100+1); 
 centeredMenu = menu-»getPosition(); 


} 
 alignedH = true; 
alignMenusH(); 


首先 定义 菜单 项 (关于 菜单 项 本 书 会 在 后 面 的 章节 中 作 讲 解 ) ， 然 后 用 它们 定义 初始 化 菜单 Menu 实 例 ， 最 后 将 Menu 实 例 加 入 到 Layer 中 显示 出 来 。 效 果 如 图 3-18 所 示 。 


MainMenu 


图 3-18 定义 的 菜单 对 象 显 示 效 果 


菜单 类 还 提供 了 alignltemsVertically 和 alignltemsHorizontally 等 函数 。 如 代码 清单 3-22 所 示 ，tests 项 目 中 MenuTest.cpp 的 MenuLayer2 的 构造 函数 alignMenusH 就 是 alignltems-Horizontally 水 平 
对 齐 两 种 方法 对 比 ， 一 种 是 alignltemsHorizontally 水 平 对 齐 ， 另 一 种 是 alignltemsHorizontallyWithPadding 水 平 对 齐 ， 这 种 水 平 对 齐 是 上 下 留 空 间 的 。 效 果 对 比 请 见 图 3-18。 


void Мепиауег2::а1ідпМепиѕн () 


{ 


for (int 1=0;1<2;1++) 


{ 


auto menu = static cast<Menu*>( getChildByTag (100+i) ); 
menu->setPosition( _centeredMenu ); 
if (i==0) 


{ 
// 
设置 菜单 对 齐 
menu-»alignlItemsHorizontally(); 
auto p = menu-»getPosition(); 
menu-»setPosition(p + Point(0,30)); 


} 


else 


{ 
设置 对 齐 间隔 


// 


menu-»alignlItemsHorizontallyWithPadding (40); 
auto р = menu-»getPosition(); 
menu-»setPosition(p - Point(0,30)); 


使 用 方法 比较 简单 ， 直 接 调用 就 可 以 。 下 一 节 介绍 Cocos2D-X 中 的 图 形 绘制 类 。 


在 节点 类 Node 中 ， 可 以 重 写 draw 函 数 并 在 其 中 绘制 图 形 ， 如 tests 项 目 中 Draw-PrimitivesTest 文 件 夹 下 的 DrawPrimitivesTest.cpp 中 的 DrawPrimitivesTest 类 的 draw 函 数 。 
pp 


绘制 直线 如 代码 清单 3-23 所 示 。 


DrawPrimitives::drawLine( VisibleRect::leftBottom(), 
VisibleRect::rightTop() ); 


参数 分 别 为 直线 的 起 点 和 终点 。 默 认 绘制 的 直线 是 白色 的 、 不 透明 的 、 线 宽 是 1， 并 且 是 抗 饥 齿 的 。 设 置 这 些 绘制 参数 后 进行 直线 绘制 ， 如 代码 清单 3-24 所 示 。 


代码 清单 3-24 ”设置 绘制 参数 后 进行 直线 绘制 


设置 线 宽 
glLineWidth( 5.0f ); 
// 
设置 颜色 
DrawPrimitives::setDrawColor4B (255,0,0,255); 


绘制 
DrawPrimitives::drawLine( VisibleRect::leftTop(), 
VisibleRect::rightBottom() ); 


设置 线 宽 和 颜色 后 的 直线 绘制 。 这 里 需要 说 明 的 是 ，OpenGL 中 是 状态 机 ， 这 些 参 数 除 非 重 新 设置 ， 否 则 都 会 保持 到 下 一 个 状态 。 
2. 绘 制 点 
如 代码 清单 3-25 所 示 ， 注 意 OpenGL 中 的 点 是 正方 形 的 。 


代码 清单 3-25 ”绘制 点 


// 

点 数组 

Point points[] = { Point(60,60), Point(70,70), Point(60,70), 
Point (70,60) }; 


// 
设置 点 大 小 


DrawPrimitives::setPointSize(4); 


// 
设置 颜色 
DrawPrimitives::setDrawColor4B(0,255,255,255); 


绘制 


DrawPrimitives::drawPoints( points, 4); 


函数 的 参数 为 圆心 、 半 径 、 角 度 、 分 段 数 (将 圆 微分 为 直线 ) 和 是 否 与 中 心 连 线 ， 如 代码 清单 3-26 所 示 。 


代码 清单 3-26 HE 


// 
设置 线 宽 
glLineWidth (16); 
// 

设置 颜色 
DrawPrimitives::setDrawColor4B(0, 255, 0, 255); 
// 


绘制 


DrawPrimitives::drawCircle( VisibleRect::center(), 100, 0, 10, false); 


4. 画 多 边 形 


函数 的 参数 为 点 数组 、 点 数量 和 图 形 是 否 封闭 ， 如 代码 清单 3-27 所 示 。 


代码 清单 3-27 ” 画 多 边 形 


// 

设置 颜色 

DrawPrimitives::setDrawColor4B(255, 255, 0, 255); 
// 
设置 线 宽 
glLineWidth (10); 
/ / 

点 数组 
Point vertices[] = ( Point(0,0), Point(50,50), Point(100,50), 


Point (100,100), Point(50,100) }; 
DrawPrimitives::drawPoly( vertices, 5, false); 


5. 画 贝 塞 尔 曲线 


函数 的 第 一 个 参数 为 一 个 控制 点 ， 第 二 个 和 第 三 个 参数 为 两 个 控制 点 ， 最 后 一 个 参数 为 分 段 数 ， 如 代码 清单 3-28 所 示 。 


代码 清单 3-28 HNR 


CHECK GL ERROR DEBUG(); 
/ / 
绘制 贝 塞 尔 曲线 

DrawPrimitives::drawQuadBezier (VisibleRect::leftTop(), 


VisibleRect::center(), VisibleRect::rightTop(), 50); 

/ 

检测 

CHECK GL ERROR DEBUG(); 

// 

绘制 

DrawPrimitives::drawCubicBezier (VisibleRect::center(), 

Point (VisibleRect::center().x4*30,VisibleRect::center().y*50), 
Point (VisibleRect::center().x4*60,VisibleRect::center().y-50), 


VisibleRect::right(),100); 


示例 的 运行 效果 如 图 3-19 所 示 。 


ы draw primitives 


^Brawing-Pgeffitives. Use DrawMede- instead 


"tna 
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图 3-19 ”绘制 示例 运行 效果 


为 了 方便 使 用 Cocos2D-X 提 供 的 DrawNode 绘 制 节点 ， 就 不 需要 重 写 Draw 国 数 ， 也 可 以 绘制 图 形 了 ， 提 供 的 国 数 如 表 3-9 所 示 。 


表 3-9 ”DrtrawNode 提 供 的 函数 


函数 名 撕 Ж 
drawDot mj 117 
drawSegment 夯 线 
drawPolygon iui ЖЕ 
draw Triangle 绘制 三 角形 
drawCubicBezier =W Ul 3E gli £k 
drawQuadraticBezier 次 贝 蹇 尔 曲线 


在 游戏 中 ， 时 常 需要 隔 一 段 时 间 更 新 一 些 数据 或 者 人 物 位 置 ，Cocos2D-X 中 提供 了 这 些 时 间 调 度 的 函数 ， 所 有 Node 类 的 子 类 都 有 这 样 的 函数 ， 定 义 方法 如 代码 清单 3-29 所 示 。 


schedule (schedule selector (SchedulerAutoremove::autoremove), 0.5f); 


这 是 一 个 按时 调用 一 个 函数 的 方法 ， 第 一 个 参数 使 用 schedule_selector 选 择 器 将 autoremove 函 数 名 称 传 进来 。 第 二 个 参数 是 时 间 间 隔 。 定 义 这 个 以 后 就 会 隔 一 段 时 间 调 用 一 次 该 函数 ， 直 到 
unschdule 被 调用 unschdule 的 使 用 如 代码 清单 3-30 所 示 。 


unschedule (schedule selector (SchedulerAutoremove: :autoremove)); 


这 句 被 调用 ， 之 前 schedule 的 时 间 调 度 将 结束 。 使 用 如 下 代码 分 别 暂停 并 重新 启动 shedule， 如 代码 清单 3-31 所 示 。 


m 
THE schedule 

 pausedTargets = director-»getScheduler () -^pauseAllTargets(); 
/ / 


重新 启动 schedule 


director-»getScheduler()-»resumeTargets ( pausedTargets); 


fs&FHunscheduleAllSelectors () 可 以 使 所 有 schedule 停 止 


有 一 种 固定 的 调用 方式 ， 就 是 使 用 scheduleUpdate， 它 会 在 0.01 秒 左右 调用 一 次 update 方 法 ， 只 要 重 载 update 方 法 即 可 。 


3.9 ”Ref 类 和 内 存 管理 
在 Cocos2D-X 3.0 之 前 的 版 本 中 ， 所 有 引擎 中 的 类 都 继承 自 CCObject 类 ，CCObject 类 负责 内 存 管理 ， 这 是 一 种 类 似 Objective-C 的 内 存 管理 方法 ， 虽 然 这 种 方法 被 保留 到 了 3.0 版 本 ,但 是 已 经 去 掉 了 
CCObject 这 种 容易 混淆 的 名 字 ， 而 其 中 三 个 最 重要 的 函数 : retain、release 和 autorelease 得 到 了 保留 。 


Cocos2D-X 采 用 C++ 语言 进行 开发 ，C+ + 中 的 对 象 是 采用 new/delete 机 制 来 进行 管理 ， 即 当 创 建 一 个 对 象 的 时 候 ， 调 用 new 来 申请 一 部 分 内 存 ， 当 你 不 需要 这 个 对 象 的 时 候 ， 直 接 调用 delete 就 可 以 
释放 这 部 分 内 存 ， 这 样 处 理 的 好 处 是 程序 可 以 完全 掌握 内 存 管理 的 方方面面 。 但 是 ， 不 好 的 地 方便 是 程序 员 有 了 时 会 忘记 释放 内 存 就 会 发 生 内 存 泄露 ， 导 致 不 可 预计 的 后 果 。 


Cocos2D-X 中 推荐 采用 引用 计数 的 方式 管理 内 存 ， 内 存 管理 的 基本 原则 是 : 当 创建 一 个 新 对 象 的 时 候 ， 内 人 存 计数 计 为 1， 每 次 进行 retain 保 留 操作 的 时 候 ， 内 存 计数 加 1， 每 次 进行 release 释 放 操 作 的 时 
候 ， 内 人 存 计数 减 1。 另 外 就 是 自动 释放 对 象 操 作 autorelease， 对 一 个 对 象 进行 autorelease 操 作 就 表明 这 个 对 象 处 于 自动 管理 的 状态 ， 会 在 内 存 管理 池 CCPoolManager 中 添加 这 个 对 象 ， 并 且 在 自动 释放 内 
存 池 CCAutoreleasePool 的 堆栈 中 申请 一 块 内 存 池 放 入 这 个 对 象 。 之 后 在 对 象 不 被 需要 用 的 时 候 引 擎 会 自动 清除 它 ，3 引 擎 是 用 单一 的 线程 来 进行 场景 的 绘制 ， 通 过 不 断 调 用 主 循环 这 个 函数 ， 这 个 水 数 除了 

场景 的 绘制 ， 也 会 调用 PoolManger 的 pop 函 数 对 自动 管理 的 对 象 进行 释放 操作 ，pop 遂 数 会 对 AutoreleasePool 堆 栈 栈 顶 的 内 存 池 进 行 操作 ， 将 池内 的 对 象 标记 为 非 自动 管理 状态 ， 并 进行 一 次 
release 操 作 ， 清 除 引 用 计数 为 1 的 对 象 ， 然 后 取出 前 一 个 入 栈 的 内 存 池 ， 等 待 下 一 轮 的 释放 。 


这 里 需要 说 明 的 是 这 种 autorelease 操 作 并 不 被 推荐 ， 因 为 这 种 机 制 是 每 帧 检测 一 次 ， 如 果 某 个 对 象 在 上 没有 进行 retain 操 作 ， 很 有 可 能 在 这 一 帧 的 时 候 这 个 对 象 就 会 被 释放 掉 而 导致 释放 了 有 用 的 内 
存 ， 而 如 果 进 行 了 retain 操 作 ， 释 放 的 时 候 有 可 能 会 造成 内 存 泄 露 。 不 仅 如 此 ， 使 用 autorelease 自 动 释放 内 存 操作 还 会 使 得 程序 的 执行 效率 下 降 ， 因 此 Cocos2D-X 中 并 不 推荐 使 用 autorelease 自 动 释放 内 
人 存 操作 ，Cocos2D-X 中 存在 大 量 的 静态 工厂 函数 ， 这 些 函 数 全 都 使 用 了 autorelease 国 数 ， 通 过 静态 工厂 来 生成 对 象 可 以 简化 代码 。 


关于 内 存 管理 总 结 起 来 有 4 个 原则 。 


: 谁 创建 ， 谁 释放 。 使 用 new 构 造 出 来 的 函数 引用 计数 为 1， 需 要 调用 release 或 者 delete 释 放 ，Cocos2D- 又 中 封装 的 create 骂 数 中 的 步骤 是 先 调 用 new 构 造 出 来 一 个 对 象 ， 因 为 要 符合 “ 谁 创 建 ， 谁 释放 ”的 
原则 ， 而 create 函数 需要 返回 这 个 对 象 ， 不 能 自己 释放 自己 创建 的 对 象 ， 所 以 要 调用 autotelease 将 对 象 放 入 自动 释放 池 。 也 就 是 说 create 出 来 的 对 象 ， 如 果 不 调 用 tetain 函 数 ， 那 么 下 一 帧 〈 再 次 调用 update 时 ) 
这 个 对 象 已 经 被 自动 释放 。 


谁 需 要 保留 谁 释放 。 当 一 个 对 象 被 其 他 指针 需要 的 时 候 该 指针 进行 保留 操作 (retain) ， 当 不 需要 时 进行 telease 释 放 。 需 要 注意 的 是 ，addChild 中 已 经 调用 了 tetain 函 数 ， 所 以 创建 的 Node 节 点 ， 不 需要 
tetain， 直 接 传递 给 addChild 被 加 在 父 节 点 上 就 可 以 保留 了 。 


- 传递 赋值 时 ， 需 要 先 fetain 形 参 ， 后 telease 原 指针 ， 最 后 赋值 。 


.自动 释放 池 PoolManaget。 将 对 象 置 于 自动 释放 池 中 ， 每 帧 绘制 结束 ， 就 自动 释放 池 中 的 对 象 。 


310 ”本 章 小 结 


本 章 介 绍 了 Cocos2D-X 一 些 基 本 的 类 ， 包 括 Node 类 ， 它 是 一 个 没有 贴图 的 类 ， 后 面 介绍 构成 游戏 的 Scene 类 和 Layer 类 ， 并 且 介 绍 了 布景 层 类 的 子 类 ， 最 后 介绍 了 图 形 绘制 类 和 时 间 调 度 的 内 容 。 


学 习 本 章 内 容 可 以 根据 示例 自己 写 一 些小 程序 ， 第 4 章 介绍 Cocos2D-X 中 图 片 相关 类 。 


第 4 瘟 ”Cocos2D-X 中 的 图 片 泻 染 类 


上 一 章 介绍 了 Cocos2D-X 的 核心 类 ，Node 节 点 类 是 所 有 绘制 在 屏幕 上 的 对 象 的 基础 ， 但 是 Node 本 身 并 不 显示 任何 图 形 ， 游 戏 是 由 图 片 组 成 的 。 本 章 介绍 Cocos2D-X 中 的 图 片 泻 染 类 ， 包 括 精灵 类 
九宫 格 精灵 类 等 ， 后 半 部 分 介绍 如 何在 Cocos2D-X 中 节约 图 片 的 内 存 。 


精灵 类 sprite 是 一 张 二 维 的 图 片 对 象 ， 它 可 以 用 一 张 图 片 或 者 一 张 图 片 的 一 块 矩 形 部 分 来 定义 。sprite 和 它 的 子 类 可 以 作为 精灵 批 处 理 类 的 子 项 。 它 的 继承 关系 如 图 4-1 所 示 。 


BlendProtocol 


TextureProtocol 


Sprite 


PhysicsSprite 


4.1.1 Sprite 类 的 成 员 及 函数 


Sprite 类 的 主要 保护 成 员 数 据 如 表 4-1 所 示 。 


名 HW 
_shouldBeHidden 
_тесї 
 rectRotated 
 offsetPosition 


 unflippedOffsetPositionFromCenter 
 flippedX 

 flippedY 

dirty 


 recursiveDirty 


Sprite hE = БЕ#ТАПЖ4-2К/тлхх. 


图 4-1 5рше®Ж ЖА 


表 4-1 Sptite 类 的 主要 保护 成 员 数 据 


布尔 型 


表 4-2 Sprite 类 的 主要 公共 学 数 


f Ж 
A: ЙТ К Betik 
长 宽 构 成 的 矩形 
定形 是 否 旋转 
俩 移 位 置 
从 中 心 位 置 的 非 平移 偏 移 
ER x 轴 镜 像 
是 否 y 轴 镜 像 
是 否 需要 更 新 
是 否 需要 递归 的 更 新 


函数 名 返回 类 型 fü 述 
createWithTexture | 通过 贴图 定义 精灵 
| 通过 SpriteFrame 定义 精灵 


=> 
У 
" 4: 

一 一 
пех 


—" 
一 
er 
= > 
= 
12 


createWithSpriteFrame 


createWithSpriteFrameName 布尔 型 通过 SpriteFrame 名 称 定 义 精 灵 
createWithFile 布尔 型 通过 文件 路 径 定 义 
setTextureRect 设置 贴图 宅 形 

displayFrame sk fa A BUE os doi 
setDisplayFrame T 设置 当前 显示 帆 
isFrameDisplayed 当 南 是否 显 示 此 显示 由 
getBatchNode ЗА ИР ру ex 
setBatchNode T 设置 精灵 批 处 理 节 点 
setDisplayFrame WithAnimation Name 25 Ий iE ДШ 22 РК Ж | Ра. ч. луй 
getTextureAtlas 获得 纹理 贴图 集 

setTextureAtlas T 设置 纹理 贴图 集 

setFlippedX 25 设置 x 轴 的 镜像 

setFlippedY ES 设置 y 轴 的 镜像 


需要 说 明 的 是 ， 这 里 提 到 的 纹理 贴图 集 是 将 需要 的 部 分 图 片 放 在 一 张大 小 固定 的 图 片 里 ， 可 以 节约 内 存 。 因 为 过 去 OpenGL 机 制 会 把 单 张 图 处 理 成 相应 大 小 的 长 宽 都 是 2 的 n 次 方 的 图 片 ， 所 以 把 图 片 放 
在 一 起 可 以 节约 空间 。 现 在 图 片 虽 然 可 以 不 限于 2 的 n 次 方 了 ， 将 很 多 小 图 放 在 一 张大 图 里 也 有 减少 读 取 图 片 次 数 的 优势 ， 因 此 这 个 方式 依然 被 保留 ， 关 于 如 何 制作 纹理 贴图 集 将 会 在 4.4 节 介绍 。 


混合 是 将 图 片 的 源 色 和 目标 色 以 某 种 方式 混合 生成 特效 的 技术 ， 常 用 来 绘制 透明 或 半 透 明 的 物体 。 在 混合 中 起 关键 作用 的 a 值 实际 上 是 将 源 色 和 目标 色 按 给 定 比 率 进行 混合 ， 以 达到 不 同 程度 的 透明 。qa 
值 为 0 为 完全 透明 ，a 值 为 1 为 完全 不 透明 。 混 合 操作 只 能 在 RGBA 模 式 下 进行 ， 颜 色素 引 模 式 下 无 法 指定 a 值 。 物 体 的 绘制 顺序 会 影响 到 OpenGL 的 混合 处 理 ， 关 于 混合 的 参数 ， 参 看 表 4-3。 


表 4-3 ”混合 的 参数 


名 称 fü Ж 
GL DST ALPHA 使 用 目标 颜色 的 Alpha 值 (透明 度 ) 来 作为 因子 
GL DST COLOR 把 源 颜色 的 4 个 分 量 分 别 作 为 因子 的 4 个 分 量 ， 即 (Rd, Gd, Ва, Ad) 
GL ONE 使 用 1.0 作为 系数 ， 相 当 于 完全 使 用 这 种 颜色 参与 混合 运算 
GL ONE MINUS DST ALPHA 用 1 减 去 GL DST ALPHA 计算 出 的 ， 即 (1,1,1,1)- (Ad, Ad; Ad. Ad) 
GL ONE MINUS DST COLOR 用 1343; GL DST COLOR 计算 出 的 ， 即 (1,1,1,1)-(Rd.Gd,Bd.Ad) 
GL ONE MINUS SRC ALPHA 用 1 减 去 GL_ SRC ALPHA 计算 出 的 ， 即 (1,1,1,1)-(As,As,As,As) 
GL SRC ALPHA 使 用 源 颜 色 的 alpha [ЇН (透明 度 ) 来 作为 因子 
GL SRC ALPHA SATURATE 选择 As fll I-Ad 较 小 的 那个 ， 即 (£££.1) :f= min(As,1-Ad) 
GL ZERO 使 用 0.0 作为 系数 ， 相 当 于 不 使 用 这 种 颜色 参与 混合 运算 


OpenGL 的 混合 需要 把 原来 的 颜色 (目标 颜色 ) 和 将 要 画 上 去 的 颜色 ( 源 颜色 ) 找 出 来 ， 经 过 某 种 方式 处 理 后 得 到 一 种 新 的 颜色 。OpenGL 会 把 源 颜色 和 目标 颜色 各 自 取 出 ， 并 乘 以 一 个 系数 ( 源 颜色 
乘 以 的 系数 称 为 “ 源 因子 ”， 目 标 颜 色 乘 以 的 系数 称 为 “目标 因子 ”) ， 然 后 进行 相应 的 计算 ， 这 样 就 得 到 了 新 的 颜色 。 


可 以 选择 不 同 的 参数 来 决定 两 种 颜色 处 理 后 的 运算 方式 ， 通 过 调用 glBlendEquation 来 进行 设置 ，Cs 和 Cd 表示 源 颜色 和 目标 颜色 ，S 和 D 表 示 它 们 各 自 乘 的 系数 。 


表 4-4 混合 运算 方式 


名 Ж MEE. 
GL FUNC ADD ИШ, CsS-CdD 
GL FUNC SUBTRACT 原色 减 去 目标 色 ，CsS-CdD 
GL FUNC REVERSE SUBTRACT 目标 色 减 去 原色 ，CdD-CsS 
GL MIN, GL MAX 最 小 或 最 大 


4.1.2 ”贴图 类 Texture2D 


贴图 类 Texture2D 是 关于 OpenGL 的 概念 ， 在 OpenGL 中 称 图 片 为 贴图 ， 在 Cocos2D-X 中 Texture2D 就 是 图 片 对 象 的 意思 ， 可 以 通过 它 创 建 精 灵 等 对 象 ，Texture2D 类 的 继承 关系 如 图 4-2 所 示 。 


lexture2D 


84-2 Texture2D ЖЖЖ А 
Texture2D 类 的 主要 函数 如 表 4-5 所 示 。 


表 4-5 Textute2D 类 主要 函数 


EC E 返回 类 型 я Ж 


initWithString 布尔 型 通过 字符 串 定义 Texture2D 类 
initWithImage 布尔 型 通过 图 片 路 径 定 义 Texture2D 类 
initWithData 布尔 型 通过 数据 径 定 义 Texture2D 类 
drawAtPoint 25 绘制 总 

drawInRect ze 绘制 矩形 


Texture2D 是 精灵 类 和 其 相关 类 的 基础 ， 以 下 会 看 到 很 多 类 都 可 以 用 Texture2D 类 定义 。 
4.1.3 ”精灵 批 处 理 类 SpriteBatchNode 


当 需 要 显示 两 个 或 两 个 以 上 相同 的 精灵 时 ， 如 果 逐 个 演 染 精灵 ， 每 一 次 泻 染 都 会 调用 OpenGL 的 函数 ， 因 为 当 系 统 在 屏幕 上 泻 染 一 张贴 图 的 时 候 ， 图 形 处 理 硬件 必须 首先 准备 泻 染 ， 然 后 泻 染 图 形 ， 最 
后 完成 泻 染 以 后 的 清理 工作 。 以 上 是 每 次 泻 染 固定 的 开销 ， 这 样 帧 率 就 会 下 降 159 左 右 或 者 更 多 。 


如 果 将 所 有 需要 泻 染 的 同一 张贴 图 只 进行 一 次 准备 ， 一 次 泻 染 ， 一 次 清理 就 可 以 解决 这 个 问题 ， 这 时 可 以 使 用 SpriteBatchNode 类 来 批 处 理 这 些 精灵 ， 比 如 游戏 屏幕 中 的 子弹 等 就 可 以 这 样 做 。 用 它 来 
作为 父 层 来 创建 子 精灵 ， 并 且 使 用 它 来 管理 精灵 类 ， 这 样 可 以 提高 程序 的 效率 。SpriteBatchNode 类 的 继承 关系 如 图 4-3 所 示 。 


BlendProtocol 


TextureProtocol 


spriteBatchNode 


IMXLayer 


4-3 ”SpriteBatchNode 类 继承 关系 
可 以 看 到 ，SpriteBatchNode 类 继承 于 节点 类 和 贴图 协议 。 


这 里 需要 说 明 的 是 ， 加 入 SpriteBatchNode 类 的 精灵 类 越 多 ， 它 提高 效率 的 效果 就 越 明 显 。 不 过 也 有 一 些 限 制 ， 所 有 属于 同一 个 SpriteBatchNode 类 的 精灵 类 都 有 相同 的 深度 值 ， 也 就 是 说 ， 如 果 需 要 
呈现 一 个 子弹 在 人 物 前 面 ， 另 外 一 个 子弹 在 人 物 后 面 的 不 同 遮挡 关系 的 时 候 ， 获 得 每 个 子 精灵 后 单独 设置 并 重 排序 它们 ， 尽 管 使 用 的 是 同一 张贴 图 ， 可 以 把 它们 理解 为 不 在 同一 “ 层 ” (并 不 是 布景 层 ) 。 


此 外 ， 所 有 属于 同一 个 SpriteBatchNode 类 控制 的 精灵 类 必须 使 用 同一 张贴 图 ， 但 是 这 并 不 是 一 个 限制 ， 如 果 想 使 用 不 同 的 图 片 ， 可 以 把 它们 放 在 同一 张贴 图 集中 。 


另外 还 有 一 些 限 制 ， 就 是 SpriteBatchNode 类 设置 锯齿 / 抗 饥 齿 效果 时 ， 所 有 子 精 灵 也 同时 设置 了 锯齿 / 抗 锯齿 效果 ， 不 可 以 单独 设置 ， 同 样 不 能 单独 设置 的 还 有 混合 函数 (blendfunc) 。 可 以 把 
SpriteBatchNode 类 理解 为 Layer 类 ， 只 是 SpriteBatchNode 类 只 接受 Sprite 类 和 它 的 子 类 。 


SpriteBatchNode 类 的 主要 函数 如 表 4-6 所 示 。 


表 4-6  SpriteBatchNode E 8j 3- 3e df žk 


通过 二 维 贴图 来 初始 化 精灵 批 处 理 类 SpriteBatchNode， 第 二 个 参数 是 
估计 的 Sprite 精灵 个 数 ， 但 是 并 不 会 约束 你 的 使 用 个 数 


通过 图 片 路 径 (格式 可 以 是 PNG、JPGE、PVR 等 ) 来 初始 化 精灵 批 


1n1tWithTexture 


initWithFile 处 理 类 ЫЕНЕН, 第 二 个 参数 是 估计 的 Sprite 精灵 个 数 ， 但 是 并 
不 会 约束 使 用 个 数 

increaseAtlasCapacity 25 增加 贴图 集 容量 

removeSpriteFromAtlas 将 精灵 从 贴图 Dm 删除 

init 初始 化 


创建 方法 的 第 一 个 参数 可 以 是 贴图 对 象 ， 也 可 以 是 图 片 路 径 。 这 里 主要 说 明 两 个 创建 方法 的 第 二 个 参数 。 这 个 参 是 子 节点 的 数量 ,当然 ， 如 果 使 用 第 一 种 方法 不 显 式 定义 子 节点 的 数量 ， 系 统 会 使 用 默 


认 值 29， 在 运行 时 如 果 超 过 空间 了 ,会 增加 33% 的 容量 。 


SpriteBatchNode 虽 然 可 以 提升 注 染 效率 ， 但 是 Cocos2D-X 3.0 版 本 之 前 ， 如 果 想 使 用 这 种 优化 ， 需 要 修改 精灵 的 使 用 方式 ， 第 3 章 介 绍 了 Cocos2D-X 3.0 使 用 了 自动 批 处 理 ， 但 是 自动 批 处 理 实际 上 也 
有 限制 ， 首 先 和 使 用 SpriteBatchNode 一 样 ， 精 灵 必 须 是 使 用 同一 个 纹理 ， 没 有 更 改 混合 方式 和 更 改 shader， 这 是 因为 更 改 混合 方式 和 更 改 shader 则 OpenGL 的 命令 也 就 改变 了 ， 就 不 能 使 用 同一 批 次 的 
OpenGL 演 染 命令 来 处 理 了 ， 另 外 同一 纹理 的 概念 可 以 是 把 不 同 的 图 片 通过 TexturePacker 放 在 同一 张 拼 图 里 ; 然后 就 是 需要 “连续 创建 ”的 精灵 才 可 以 实现 自动 批 处 理 ， 其 实 这 和 Cocos2D-X 3.0 的 演 染 过 


程 相 关 ， 要 绘制 的 节点 先 存放 到 队列 里 ， 然 后 由 专门 的 泻 染 线程 来 泻 染 。 对 于 队列 中 的 节点 ， 如 果 发 现 材质 和 上 一 个 一 样 ии 相同 混合 方式 和 相同 shader) ， 则 放 到 一 个 批 次 里 。 注 意 这 里 只 判断 
它 和 前 一 个 节点 ， 这 就 说 明了 为 什么 需要 “连续 创建 ”， 但 事实 不 仅 仪 是 这 样 因为 在 泻 染 之 前 会 调用 sortAlIChildren 函 数 排序 ， 它 是 根据 z 轴 顺序 ， 包 括 局 部 z 轴 和 全 局 z 轴 ， 排 序 函 数 见 代码 清单 4-1。 


代码 清单 4-1 排序 函数 


bool nodeComparisonLess (Node* n1, Node* n2) 


return( 


nl-»getLocalZOrder() < n2-»getLocalZOrder() || 
nl-»getLocalZOrder() == n2-»getLocalZOrder() && 
nl-»getOrderOfArrival () 

« n2-»getOrderOfArrival() ) 


这 就 说 明了 不 止 是 “连续 创建 ”的 精灵 才 可 以 自动 批 处 理 ， 需 要 z 轴 顺序 临近 的 精灵 才 可 以 自动 批 处 理 ， 最 简单 的 做 法 就 是 把 需要 自动 批 处 理 的 精灵 设置 成 同一 个 全 局 z 轴 值 ， 到 这 里 总 结 一 下 可 以 自动 
批 处 理 的 精灵 的 条 件 其 实 和 3.0 版 本 之 前 使 用 的 SpriteBatchNode 是 一 样 的 ， 只 是 不 需要 再 显 式 调用 SpriteBatchNode 了 。 


下 面 介 绍 SpriteFrame 精 灵 帧 。 


414 精灵 帧 类 SpriteFrame 


精灵 帧 的 概念 是 相对 于 动画 而 产生 的 ， 一 个 精灵 是 固定 的 节点 ， 它 可 以 拥有 许多 精灵 帧 SpriteFrame， 在 它们 之 间 切 换 就 形成 了 动画 。SpriteFrame 类 的 继承 关系 如 图 4-4 所 示 。 


Clonable 


SpriteFrame 


4-4 ”SpriteFrame 类 继承 关系 
SpriteFrame 类 通过 贴图 定义 ， 也 可 以 是 贴图 的 一 部 分 ， 通 过 精灵 的 setDisplayFrame 函 数 来 设置 当前 显示 的 精灵 帧 。 它 的 主要 函数 如 表 4-7 所 示 。 
表 4-7 SpriteFrame 类 的 主要 函数 
通过 图 片 路 径 (格式 可 以 是 PNG、JPEG、PVR 等 )， 第 二 个 参数 是 拖 
initWithTextureFilename 布尔 型 形 范 于 ， 也 就 是 精灵 帧 的 大 小 。 还 有 可 选 参数 : 第 三 个 参数 为 设置 是 否 旋 
转 ， 第 四 个 参数 为 设置 起 始点 的 俩 移 位 置 ， паш 月 之 前 的 原始 大 小 


通过 贴图 定义 ， 第 二 个 参数 是 矩形 范围 ， LAE os JAN. Xf 
initWithTexture 布尔 型 有 可 选 参数 : 第 二 个 参数 设置 是 否 旋 转 ， 第 = ` ZEB EE i А, Пн 


移 位 置 ， 和 未 被 裁剪 之 前 的 原始 大 小 


getOriginalSize S I AR ИК ЖАУУ p H3 ИДИ AU] 
setOriginalSize 2 О I 93 pt E) АДИ ЖЛ] 


4.1.5 ”精灵 帧 缓存 类 SpriteFrameCache 


精灵 帧 缓存 类 SpriteFrameCache 用 来 存储 精灵 帧 ， 提 前 缓存 起 来 有 助 于 程序 的 效率 。SpriteFrameCache 是 一 个 单 例 模式 ， 不 属于 某 个 精灵 ， 是 所 有 精灵 共享 使 用 的 。SpriteFrameCache 类 的 继承 关 
系 如 图 4-5 所 示 。 


SpriteFrameCache 


图 4-5 SpriteFrameCache X 4k Ж X А 
SpriteFrameCache 类 的 主要 函数 如 表 4-8 所 示 。 
表 4-8 ”SpriteFrameCache 类 主要 函数 
函数 名 返回 类 型 їн ж 


SpIl Г S WI 1 


以 通过 第 二 个 参数 定义 的 贴图 对 象 或 路 径 
addSpriteFrame a 通过 SpriteFrame 精灵 帧 定义 ， 第 二 个 参数 是 自 定 义 的 名 称 
removeSpriteFrames iB a o oi 
removeUnusedSpriteFrames 2 删除 不 用 的 精灵 帧 
spriteFrameByName РАШ 根据 定义 的 名 称 找到 精灵 帧 ， 如 果 没 有 对 应 的 精灵 帧 ， 返 回 空 
removeSpriteFrameByName e 通过 名 称 删除 精灵 帧 


之 所 以 需要 使 用 缓存 ， 是 为 了 提升 效率 ， 当 第 一 次 将 贴图 存 入 缓存 类 后 ， 下 一 次 再 使 用 该 贴图 时 ， 就 不 要 再 次 读 取 了 。 当 然 这 样 也 造成 了 贴图 被 保存 在 内 存 里 占用 内 存 ， 这 就 需要 根据 实际 情况 做 不 同 
的 处 理 ， 有 时 效率 更 重要 ， 有 时 节约 内 存 更 重要 。 


41.6 九宫 格 精灵 Scale9sprite 


一 般 精 灵 缩 放 就 是 直接 把 图 片 进行 缩放 ， 而 有 些 时 候 ， 比 如 有 些 按钮 是 带 边 框 的 ， 在 进行 缩放 时 ， 我 们 是 不 希望 这 部 分 边框 缩放 的 。Cocos2D-X 中 提供 了 九宫 格 精灵 Scale9sprite 来 处 理 这 个 问题 ， 九 
定格 精灵 Scale9Sprite 的 继承 关系 如 图 4-6 所 示 。 


14-6  Scale9Sprite ЖЖЖ X А 


Scale9sprite 类 的 主要 函数 如 表 4-9 所 示 。 


表 4-9 Scale9Sptite 类 主要 函数 


函数 名 返回 类 型 ж и 


setCapInsets 25 设置 中 间 格 定形 
setInsetLeft 2 设置 左 侧 空间 
setInsetRight 25 设置 右 侧 空间 
setInsetTop T iE DU pas [Н] 
setInsetBottom 2 ix EDI pas ЇН] 


学 了 这 么 多 基础 知识 ， 可 能 会 有 些 厌倦 了 ， 下 面 就 看 看 使 用 的 例子 。 


41.7 实战 : 精灵 类 及 其 相关 类 的 使 用 


tests 项 目 中 的 SpriteTest 目 录 下 是 关于 精灵 类 的 使 用 示例 ， 首 先是 定义 Sprite 类 的 使 用 方法 ， 该 段 代 码 源 自 SpriteTest.cpp 文 件 中 的 Sprite1 类 的 addNewSpriteWithCoords 函 数 ， 如 代码 清单 4-2 所 示 。 


代码 清单 4-2 ”Sprite 类 的 使 用 方法 


void Spritel::addNewSpriteWithCoords (Point p) 
{ 


// 
随机 产生 精灵 


int idx = (int) (CCRANDOM 0 1() * 1400.0f / 100.0Ё); 
int x = (idx$5) * 85; 
int y = (idx/5) * 121; 
// 
创建 精灵 
auto sprite = Sprite::create("Images/grossini dance atlas.png", 


Rect (x,y,85,121) ); 
addChild( sprite ); 
// 


设置 位 置 
Sprite-»5setPosition( Point( р.х, р.у) ); 
// 

创建 动作 
ActionInterval* action; 

loat random = CCRANDOM 0 1(); 


if( random « 0.20 ) 
action = ScaleBy::create(3, 2); 
// 


旋转 
else if(random < 0.40) 
action = RotateBy::create(3, 360); 


// 
闪烁 
else if( random < 0.60) 
action = Blink::create(1, 3); 
else if( random « 0.8 ) 
action = TintBy::create(2, 0, -255, -255); 


else 
action = FadeOut::create (2); 


auto action back = action-»reverse(); 
// 
动作 序列 
auto seq = Sequence::create( action, action back, NULL ); 
// 
运行 动画 


sprite->runAction( RepeatForever::create(seq) ); 


这 段 代 码 很 清晰 ， 首 先 确定 在 贴图 中 取 图 片 的 位 置 ， 然 后 根据 这 个 位 置 选取 图 片 并 定义 ， 第 一 个 参数 是 图 片 地 址 ， 第 二 个 参数 是 矩形 ， 前 两 个 参数 起 点 为 取 图 的 起 点 的 横 坐 标 和 纵 坐 标 ， 后 两 个 参数 为 
和 矩形 的 宽 和 高 。 运 行 效果 如 图 4-7 所 示 。 


0.004 ~% MainMenu 
59.8 | 


图 4-7 添加 精灵 类 运行 效果 


下 面 来 看 新 建 精灵 批 处 理 类 SpriteBatchNode 的 示例 ， 该 段 代 码 出 自 tests 项 目 中 的 SpriteTest 目 录 下 的 SpriteTest.cpp 文 件 中 的 SpriteBatchNode1 类 的 构造 函数 和 addNewspriteWithCoords 方 法 ， 如 
代码 清单 4-3 所 示 。 


void SpriteBatchNodel::addNewSpriteWithCoords (Point p) 
{ 


auto BatchNode = static cast«SpriteBatchNode*» 
( getCchildByTag (kTagSpriteBatchNode) ); 


// 
随机 产生 精灵 
int idx = CCRANDOM 0 1() * 1400 / 100; 
int x = (idx$5) * 85; 
int y = (idx/5) * 121; 
// 
auto sprite = Sprite::createWithTexture 
(BatchNode->getTexture(), Rect(x,y,85,121)); 
BatchNode-»addChild (sprite); 


/ 

设置 位 置 
sprite->setPosition( Point( р.х, р.у) ); 
// 


动画 


ActionInterval* action; 

float random = CCRANDOM 0 1(); 

if( random « 0.20 ) 
action = ScaleBy::create(3, 2); 


else if(random « 0.40) 

action = RotateBy::create(3, 360); 

else if( random « 0.60) 

action = Blink::create(1, 3); 

else if( random « 0.8 ) 

action = TintBy::create(2, 0, -255, -255); 


else 
action = FadeOut::create (2); 
NT. 
动作 反 转 
auto action back = action-»reverse(); 
/ / 
动作 序列 
auto seq = Sequence::create(action, action back, NULL); 
// 
运行 动画 
Sprite-»runAction( RepeatEorever: :create (seq)); 


首先 看 SpriteBatchNode1 的 构造 函数 ， 定 义 SpriteBatchNode 类 ， 第 一 个 参数 是 贴图 路 径 ， 第 二 个 参数 是 预 估 的 Sprite 类 个 数 。 在 addNewsSpriteWithCoords 方 法 中 把 新 建 的 方法 作为 子 节点 加 入 到 
spriteBatchNode 类 中 ， 运 行 效果 如 图 4-8 所 示 。 


riteBatchNode (tap screen) 
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94-8 ” SpriteBatchNode 类 运行 效果 


下 面 分 别 看 一 下 精灵 类 和 精灵 批 处 理 类 改变 z 轴 顺序 并 改变 遮挡 关系 的 方法 。 首 先 看 精灵 类 改变 z 轴 顺序 并 改变 遮挡 关系 的 方法 ， 如 代码 清单 4-4 所 示 。 


void SpriteZOrder::reorderSprite (float dt) 
{ 


auto sprite = static cast«Sprite*»( getChildByTag(kTagSpritel) ); 
// 

获得 z 

轴 坐 标 


int z = sprite-»getLocalZOrder(); 


// 
根据 坐标 设置 不 同 的 变化 方向 


if( z < =1 ) 
dir = 1; 
if( z > 10) 
dir = =]; 
// 
变化 z 
轴 值 
z += dir * 3; 
/ / 
设置 z 


轴 坐 标 并 重新 排序 
reorderChild(sprite, z); 


首先 通过 getLocalZOrder 方 法 获得 目前 的 z 轴 值 ， 然 后 改变 后 父 节点 调用 reorderChild 函 数 ， 第 一 个 参数 是 精灵 对 象 ， 第 二 个 参数 是 设置 的 z 轴 值 。 


下 面 来 看 精灵 批 处 理 类 改变 z 轴 顺序 并 改变 遮挡 关系 的 方法 ， 如 代码 清单 4-5 所 示 。 


void SpriteBatchNodeZOrder::reorderSprite (float dt) 
{ 


auto batch- static cast«SpriteBatchNode*» 
(getCchildByTag( kTagSpriteBatchNode )); 
auto sprite = static cast«Sprite*» 
(batch-»getChildByTag (kTagSpritel)); 


int z = sprite-»getLocalZOrder(); 


// 
根据 坐标 设置 不 同 的 变化 方向 


if( z < -1 ) 
dir > 
if( z > 10) 
dir = =]; 
// 
变化 z 
轴 值 
z ie 3> 
// 
设置 z 
轴 坐 标 并 重新 排序 


batch->reorderChild (sprite, z); 


和 之 前 精灵 类 重新 排序 相 比 ， 区 别 就 是 这 次 父 节点 就 是 精灵 批 处 理 类 调用 reorderChild 函 数 ， 运 行 效 果 如 图 4-9 所 示 。 


prite: Z order 


P MainMenu 


图 4-9 ”改变 z 轴 遮挡 运行 效果 


SpriteAliased::SpriteAliased() 
{ 


auto s = Director::getInstance()-»getWinSize(); 
// 
创建 左 侧 精灵 
auto spritel = Sprite::create("Images/grossini dance atlas.png", 


Rect(85*1, 121*1, 85, 121)); 
spritel-»5setPosition( Point( s.width/2 - 100, s.height/2 ) ); 
addChild(spritel, 0, kTagSpritel); 


/ / 
创建 右 侧 精 灵 
auto sprite2 = Sprite::create("Images/grossini dance atlas.png", 
Rect(85*1, 121*1, 85, 121)); 
sprite2-»5setPosition( Point( s.width/2 + 100, s.height/2 ) ); 
addChild(sprite2, 0, kTagSprite2); 
auto scale = ScaleBy::create(2, 5); 
auto scale back = scale-»reverse(); 
auto seq = Sequence::create( scale, scale back, NULL); 


auto repeat - RepeatForever::create (seq); 
auto repeat2 = repeat-»clone(); 
// 

运行 动画 
Spritel-»runAction (repeat); 
Sprite2-»runAction (repeat2); 


首先 精灵 类 通过 getTexture 获 得 贴图 ， 分 别 调用 setAliasTexParameters 设 置 锯 齿 ， 调 用 setAntiAliasTexParameters 设 置 抗 锯齿 。 


为 什么 要 设置 抗 锯齿 呢 ? 因 为 受 分 辨 的 制约 ， 在 泻 染 物体 时 ， 被 绘制 的 物体 边缘 总 会 或 多 或 少 地 呈现 三 角形 的 锯 上 浮 ， 抗 锯齿 对 图 像 边缘 进行 柔 化 处 理 ， 使 图 像 边缘 看 起 来 更 平 消 ， 更 接近 实物 的 
物体 。 因 为 默认 是 抗 锯 上 ， 所 以 抗 锯齿 不 用 设置 锯齿 需要 在 进 场 最 和 出 场景 时 设置 。 


运行 效果 如 图 4-10 所 示 ， 左 边 的 是 锯齿 ， 右 边 的 是 抗 锯齿 l, 


下 面 是 定义 和 使 用 SpriteFrameCache 类 的 函数 ， 该 段 代 码 出 自 tests 项 目 中 SpriteTest 目 录 下 的 SpriteTest.cpp 文 件 的 SpriteFrameTest 类 中 的 onEnter 函 数 ， 如 代码 清单 4-7 所 示 。 


|'rn Cr УД лт mI 


|! MainMenu 


图 4-10 ЖЖК ELE S o dU d 093841 XU. 


// 

获得 精灵 帧 缓存 

auto cache = SpriteFrameCache::getInstance(); 
/7 
存 入 图 片 
cache-»addSpriteFramesWithFile ("animations/grossini.plist"); 
cache-»addSpriteFramesWithFile ("animations/grossini gray.plist", 
"animations/grossini gray.png"); и 
cache-»addSpriteFramesWithFile ("animations/grossini blue.plist", 
"animations/grossini blue.png"); 


 Spritel = Sprite::createWithSpriteFrameName 
("grossini dance 01.png"); 
 Spritel-»setPosition( Point( s.width/2-80, s.height/2) ); 
// 

创建 批 处 理 精 灵 
auto spritebatch = SpriteBatchNode::create 
("animations/grossini.png"); 
spritebatch-»addChild( spritel); 
addChild (spritebatch); 


Vector«SpriteFrame*» animFrames (15); 


/ / 

将 动画 存 入 数组 中 

char str[100] = {0}; 
for(int i = 1; i < 15; i++) 


sprintf (str, "grossini dance %02d.png", i); 
auto frame = cache->getSpriteFrameByName( str ); 
animFrames .pushBack (frame) ; 


// 

创建 动画 

auto animation = Animation::createWithSpriteFrames (animFrames, 0.3f); 
// 

运行 动画 

| Spritel-»runAction 

( RepeatForever::create( Animate::create(animation) ) ); 


首先 是 通过 贴图 集 的 plist 文 件 和 图 的 路 径 传 入 addSspriteFramesWithFile 函 数 定义 ， 然 后 通过 spriteFrameByName 传 入 图 片 名 称 获得 SpriteFrameCache 精 灵 帧 缓存 类 对 象 。 代 码 清单 4-8 所 示 为 在 
onExit 函 数 中 删除 这 些 精 灵 帧 缓存 。 


void SpriteFrameTest::onExit() 


{ 


SpriteTestDemo::onExit (); 
auto cache = SpriteFrameCache::getInstance(); 


// 

删除 图 片 
cache-»removeSpriteFramesFromFile ("animations/grossini.plist"); 
сасһе-> 


removeSpriteFramesFromFile ("animations/grossini gray.plist"); 
сасһе-> 
removeSpriteFramesFromFile ("animations/grossini blue.plist"); 


调用 removeSpriteFramesFromFile 删 除 即 可 。 


下 面 来 看 精灵 帧 类 的 使 用 方法 ， 首 先是 创建 精灵 帧 类 ， 如 代码 清单 4-9 所 示 。 该 段 代 码 出 自 tests 项 目 中 SpriteTest 目 录 下 SpriteTest.cpp 文 件 中 的 SpriteAnimationSplit 类 的 构造 函数 。 


代码 清单 4-9 ”创建 精灵 帧 类 


auto texture = Director::getInstance|() 
-»getTextureCache () -»addImage ("animations/dragon animation.png"); 


// 
从 贴图 上 截取 不 同 的 矩形 块 


auto frame0 = SpriteFrame::createWithTexture (texture, 
Rect (132*0, 132*0, 132, 132)); 
auto framel = SpriteFrame::createWithTexture (texture, 
Rect(132*1, 132*0, 132, 132)); 
auto frame2 = SpriteFrame::createWithTexture (texture, 
Rect(132*2, 132*0, 132, 132)); 
auto frame3 = SpriteFrame::createWithTexture (texture, 
Rect(132*3, 132*0, 132, 132)); 
auto frame4 = SpriteFrame: :createWithTexture (texture, 
Rect(132*0, 132*1, 132, 132)); 
auto frame5 = SpriteFrame: :createWithTexture (texture, 
Rect(132*1, 132*1, 132, 132)); 


ЖЧ сгеатерй# Вв 00, JERHSSOQUGUEETSIISS. FANRAN САНАА Uu, SUURSSRA-10BTz, TAERÍVRBUHElSpriteAnimationSplitZSBSjonExiteRZy, 


代码 清单 4-10 ”删除 无 用 的 精灵 帧 


void SpriteAnimationSplit::onExit () 
{ 


// 

删除 无 用 贴图 
SpriteTestDemo::onExit (); 
SpriteFrameCache::getInstance()-»removeUnusedSpriteFrames(); 
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获得 精灵 帧 缓存 单 例 ， 并 调用 removeUnusedSpriteFrames 就 可 以 实现 删除 无 用 的 精灵 帧 。 下 一 部 分 介绍 Cocos2D-X 中 如 何 节 约 图 片 内 存 。 


二 者 的 区 别 可 以 在 相对 较 低 分 辩 率 的 设备 上 明显 看 到 ， 本 书 中 打印 后 不 明显 ， 以 实际 效果 为 准 。 
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从 Cocos2D-X 2.1 开 始 有 一 个 新 特性 ， 就 是 可 以 根据 一 个 模板 切割 图 片 的 节点 ， 它 就 是 ClippingNode 类 。 这 个 类 提供 了 一 种 不 规则 切割 图 片 的 方式 ， 在 这 种 方式 以 前 ， 我 们 可 以 使 用 纹理 类 自 带 的 
setTextureRect 函 数 来 切割 矩形 区 域 ， 这 种 方式 就 是 整 块 地 切割 图 片 ， 比 如 当 游 戏 中 要 实现 一 个 血 条 的 时 候 ， 就 可 以 使 用 这 种 方式 进行 切割 ， 切 掉 不 想 显示 的 部 分 ， 而 新 特性 中 提供 的 ClippingNode 最 大 的 
不 同 之 处 就 是 裁 航 将 不 仅仅 局 限于 和 矩形， 可 以 根据 任何 形状 进行 裁 萝 ， 而 你 要 做 的 只 是 给 一 个 “ 裁 草 模 板 ”， 这 就 好 比 是 用 草 刀 甬 形 状 ， 需 要 一 个 模具 类 的 东西 ， 然 后 拿 着 模具 和 要 被 裁 航 的 纸 顺 着 模具 的 

边缘 剪 就 可 以 剪 出 一 个 模具 的 形状 ，ClippingNode 的 相关 函数 如 表 4-10 所 示 。 


表 4-10 ”ClippineNode 类 主要 函数 


getStencil 返回 一 个 方 点 对 象 ， 这 个 对 和 象 就 是 之 前 提 到 的 “ 裁 瘟 模板” 
setStencil ix GARE 
getAlphaThreshold ОВ У ДЕ A OS НД ЛЕ, fno 5 9] ЛЕ ЖӘШ cb EAA BO 
setAlphaThreshold Mk fic T3 ИД BE Bj (B 

Bi iL DI^. УЧЕБ AK ИЛ, E oS УН И, МА А0 лч Ја SAI ИЙ, ЖХ 
isInverted Л isInverted {Ñ л false, Jc 10 77 ЭУ АУ 7, Vx EL 27 true 则 是 显示 剩余 的 部 分 。 由 


isInverted FR ZI 33x 4 [B 


setInverted ix A isInverted fH 


使 用 这 个 效果 ， 一 般 的 过 程 如 代码 清单 4-11 所 示 。 
代码 清单 4-11 ClippingNode 的 使 用 过 程 


E 

& e v BEC" 

Node*stencil = this-»stencil(); 
stencil-»setTag( kTagStencilNode); 
stencil-»setPosition( ccp(50,50) ); 


创建 裁剪 节点 类 

ClippingNode*clipper = this-»clipper(); 

clipper-»setTag( kTagClipperNode); 

clipper-»setAnchorFPoint (ccp(0.5,0.5)); 

clipper-»setPosition( ccp(s.width / 2 -50, s.height/ 2 - 50) ); 
/ 


/ 
为 设置 裁剪 节点 类 设置 裁剪 模板 7 
clipper-»setStencil (stencil); 
this-»addChild (clipper); 


// 

设置 裁剪 节点 类 所 放 的 内 容 
Node*content = this->content (); 
content-»setPosition(ccp(50,50) ) 
clipper->addChild (content); 


Cocos2D-X 的 test 示 例 中 提供 了 一 个 子弹 穿 过 图 的 例子 ， 很 好 地 说 明了 ClippingNode 的 使 用 ， 见 代码 清单 4-12。 


代码 清单 4-12 ”初始 化 子弹 击 穿 场景 


void HoleDemo: : setup () 


{ 


// 
子弹 击 穿 的 图 片 ， 很 多 地 方 都 用 到 的 ABCD 


图 
auto target = Sprite::create(s pathBlock); 
target-»setAnchorPoint (Point::ZERO); 
carget-»setScale (3); 
// 

创建 CCClippingNodgde 

， 它 并 不 是 负责 切割 弹 孔 的 ， 而 是 负责 切 制 出 \ABCD 

图 ” 
_outerClipper = ClippingNode::create(); 
_outerClipper->retain (); 
AffineTransform tranform = AffineTransform: : IDENTITY; 


tranform = AffineTransformScale (tranform, 


target->getScale(), target->getScale()); 
outerClipper->setContentSize( SizeApplyAffineTransform( 


target->getContentSize(), tranform)); 


uterClipper->setAnchorPoint( Point (0.5, 0.5) ); 
outerClipper->setPosition (Point (this->getContentSize()) * 0.5f); 
uterClipper->runAction (RepeatForever::create( 
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RotateBy::create (1, 45))); 
outerClipper->setStencil( target ); 


/ 
负责 弹 孔 切割 的 CCCLippingNode 


auto һо1е5С 


lipper = ClippingNode::create(); 


/ 
显示 切割 后 剩余 部 分 
holesClipper-»setInverted (true); 


// 
А, MAR 


holesClipper->setAlphaThreshold( 0.05f ); 


holesClipper->addChild (target); 


LE 孔 都 在 这 个 节点 


Ц 


holes = Node::create(); 


 holes-»retain(); 
holesClipper-»addChild( holes); 


// 


负责 切割 弹 孔 的 \ 裁 前 模板 ~ 


触摸 函数 中 真正 


holesStencil = Node::create(); 


"holesStencil-»retain(); 


holesClipper-»setStencil(  holesStencil); 
| outerClipper-»addChild (holesClipper); 
this-»addChild( outerClipper); 


// 
处 理 触摸 


auto listener = EventListenerTouchAllAtOnce::create(); 
listener-»onTouchesBegan - 
CC CALLBACK 2 (HoleDemo::onTouchesBegan, this); 


eventDispa 


tcher-» 


addEventLis 


tenerWithSceneGraphPriority(listener, this); 


实现 “ 击 穿 效 果 ”， 见 代码 清单 4-13。 


代码 清单 4-13 ”实现 击 穿 效果 


void HoleDemo: :pokeHoleAtPoint (Point point) 


{ 


// 
大 小 和 角度 随机 


// 
被 \ 击 打 “ 的 \ABCD 


// 
真正 的 弹 孔 切割 


oat scale 


= CCRANDOM 0 1() * 0.2 + 0.9; 


auto hole - 


oat rotation = CCRANDOM 0 1() * 360; 


// 
弹 孔 上 的 效果 图 片 ， 


只 是 作为 装饰 


Sprite::create ("Images/hole effect.png"); 


hole->setPosition( point ); 


hole-»setRo 


tation( rotation ); 


hole-»setScale( scale ); 
. holes-»addChild (hole); 


auto holeStencil = Sprite::create("Images/hole stencil.png"); 
holeStencil-»setPosition( point ); 

holeStencil-»setRotation( rotation ); 

holeStencil-»setScale( scale ); 

. holesStencil-»addChild (holeStencil); 


图 “缩放 一 下 ， 效 果 更 真实 
_outerClipper->runAction ( 
Sequence: :createWithTwoActions (ScaleBy::create(0.05f, 0.95f), 


yw 一 


运行 


ScaleTo::create(0.125f, 1))); 


后 点 击 图 片 就 可 以 看 到 击 穿 效果 ， 如 图 4-11 所 示 。 


| | | | 和 | | | | | | 


图 4-11 TextutePacket 运 行 效果 


在 切换 界面 时 经 常会 出 现 卡 顿 的 情况 ， 查 找 其 原因 ， 往 往 是 出 现 了 耗 时 比较 大 的 操作 ， 一 般 的 经 验 是 MO 操作 会 消耗 不 少时 间 ， 尤 其 是 当 我 们 读 入 比较 大 的 资源 的 时 候 ， 如 何 解 决 这 种 卡 顿 情况 呢 ? 这 时 
就 需要 异步 加 载 出 马 了 。 


大 图 片 的 读 取 不 是 造成 卡 顿 的 唯一 原因 ， 曾 经 发 现 过 在 跳 转 界 面 时 解析 一 个 比较 大 的 JSON 造 成 卡 顿 ， 查 找 的 办 法 一 般 是 去 掉 一 些 操作 再 看 是 不 是 依然 卡 顿 。 如 果 不 再 卡 顿 ， 那 么 去 掉 的 这 个 操作 
就 是 卡 顿 的 原因 ， 解 决 的 办 法 其 实 类 似 ， 就 是 把 这 个 操作 移动 到 别 的 位 置 ， 或 者 干脆 在 界面 切换 时 调用 载 入 动画 或 者 界面 。 


异步 加 载 就 是 把 消耗 程序 时 间 比 较 大 的 加 载 操 作 放 到 其 他 的 线程 中 ， 待 到 加 载 完 毕 后 通过 调用 回调 函数 的 方式 通知 主线 程 ， 一 般 游 戏 的 处 理 方式 就 是 在 加 载 时 进入 一 个 读 取 界 面 ， 播 放 一 些 动画 提示 玩 
家 ， 等 到 回调 函数 通知 加 载 完 毕 后 再 进入 正式 的 界面 ， 异 步 加 载 的 示例 如 代码 清单 4-14 所 示 。 


void TextureAsync::loadlImages (float dt) 


// 

载 入 图 片 

Director::getInstance ()-»getTextureCache ()-»addImageAsync ("Images/backgroundl. 
jeg", CC CALLBACK l(TextureAsync::imageLoaded, this)); 

Director: :getInstance ()-»getTextureCache ()-»addImageAsync ("Images/backgrouna2. 
jeg", CC CALLBACK l(TextureAsync::imageLoaded, this)); 

Director::getInstance ()-»getTextureCache ()-»addImageAsync ("Images/background. 
png", CC CALLBACK l(TextureAsync::imageLoaded, this)); 

Director::getInstance ()-»getTextureCache ()-»addImageAsync ("Images/atlastest. 
png", CC CALLBACK 1(TextureAsync::imageLoaded, this)); 

Director::get t Instance ()-»getTextureCache ()-»addImageAsync ("Images/grossini dance | 
atlas.png", CC CALLBACK 1l(TextureAsync::imageLoaded, this)); 


回调 函数 传 入 贴图 对 象 ， 可 以 知道 是 哪 张贴 图 被 载 入 了 ， 见 代码 清单 4-15。 


void TextureAsync::imageLoaded (Texture2D* texture) 


auto director = Director::getInstance(); 


创建 精灵 
auto sprite = Sprite::createWithTexture (texture); 
Sprite-»setAnchorPoint (Point (0,0)); 
addChild (sprite, -1); 


// 

获得 并 设置 初始 位 置 
auto size = director-»getWinSize(); 
int i = imageOffset * 32; 
Sprite-»5setPosition(Point( i $ (int)size.width, 
(i / (int)size.width) * 32 )); 
 imageOffsett-*; 


打印 获得 的 图 片 


log("Image loaded: $p", texture); 
} 


— 


4.4 Cocos2D-X 中 如 何 节约 图 片 空间 


图 片 占据 了 游戏 的 大 部 分 空间 ， 而 为 了 游戏 可 以 适 配 更 多 的 机 型 ， 我 们 常常 希望 可 以 缩小 图 片 所 占 的 大 小 ， 包 括 内 存 空 间 和 游戏 包 整 体 的 大 小 ， 本 节 首先 介绍 TexturePacker 的 用 法 ， 然 后 提供 一 些 缩 
小 图 片 大 小 的 方法 。 


4.44.1 图 片 打 包 器 TexturePacker 


TexturePacker 这 个 词 从 字面 来 说 就 是 图 片 打 包 器 。 它 是 一 款 把 若干 资源 图 片 拼接 为 一 张大 图 的 工具 (也 就 是 纹理 贴图 集 ) ， 它 不 仅 可 以 把 小 图 拼 成 一 张大 图 ， 它 还 可 以 改变 图 片 的 格式 ， 可 以 说 是 压 
缩 内 存 和 包 大 小 的 利器 ， 它 的 作者 是 Andreas Loew。 下 载 地 址 是 http://www.codeandweb.com/texturepacker/。 这 是 一 款 收费 软件 ， 本 书 采用 的 是 3.2.1 版 本 ， 运 行 效果 如 图 4-12 所 示 。 


Drag uour image folders 
Texture format | zlib compr. PVR (.руг.сс2, Ver.2) 3 Here Texureacker uli scan 


the folder for imoges and 
Tamil| B] adda of them ` 


Premultiply alpha. ( 
Hip PVR | | You con deo add pre ipa 


- "is rep да" Ба 
паты Гаа т 


а Шен | corn owas 


aoso |8) (зь 


Content protection [а] Texture Packer 2 ЕЗ ЁЗ 四 


EN. сш 
Fixed size w.| E н | v| 


Size constraints | POT (Power of 2) 
force squared | | 
Force word aligned | | 


图 4-12  TexturePackeri& 4j Ж Ж 
TexturePacker 可 以 将 图 片 打 成 统一 的 一 张大 图 及 修改 图 片 格式 等 。 


“Output” 一 栏 主要 是 设置 输出 图 片 的 格式 ， 如 图 4-13 所 示 。 


v Output 


Data Format [оо | | | | | |  £| 


Data file | | 


Texture format | zlib compr. PVR (.pvr.ccz, Ver2) $ | 
Texture file | (B 


Premultiply alpha | | 
Flip PVR | | 


Image format | RGBABRBS 


я + 


Dithering | MearestNeighbour 


4 


Auto5D 


Content protection 


图 4-13 ”格式 设置 面板 
比较 重要 的 是 选择 图 片 的 格式 ， 可 选 的 格式 包括 如 图 4-14 所 示 的 内 容 。 


其 中 比较 常用 的 就 是 PNG 和 PVRCCZ 格 式 ，PVRCCZ 是 比较 推荐 的 ， 具 体 的 原因 下 一 节 会 介绍 。 另 外 还 可 以 选择 纹理 像素 格式 ， 如 图 4-15 所 示 。 


| РМС (png) 
Data file PYR (pvr, Ver.2) 
GZip compr. PVR (.pvr.gz, Ver.2) 
Texture forma A LI СЕ: 
| JPG (jpg) 
ВМР (Бтр) 


Texture file 
qe UE СА (1да) 


TIFF (.tiff) 

РКМ with ЕТСІ (ркт) 
Netpbm Ascii (.ррт) 
Netpbm Binary (.ppm) 


2 ДАРЕ | i 


Premultiply alpha 


图 4-14 图 片 格式 


Image formati 9:41:24: 
ВСЕАВЕВЕ 
Dithering КОВА4444 

| ҢСЕВВ8 

RGB565 
АШЮ50 рсвд5551 
ВСВА5555 


ntent protection — PVRTC2 
PVRTCA 


PVRTC2 NOALPHA 
netry |  PVRTC4 NOALPHA 
| ALPHA 
ALPHA INTENSITY 


Max size ETC 


图 4-15 选择 纹理 像素 格式 


RGBA8888 是 默认 格式 ， 也 是 体积 比较 大 的 一 种 格式 。 如 果 16 位 纹理 可 以 使 用 RGB565 格 式 ， 用 16 位 全 部 用 来 显示 颜色 ， 总 共 可 以 包括 65536 颜 色 值 ， 这 就 需要 图 片 没有 透明 像素 。RBG5A1 格 式 使 用 一 
位 颜色 来 表示 Alpha 通 道 ， 也 就 是 说 使 用 这 种 格式 的 图 片 的 像素 不 是 完全 透明 的 ， 就 是 完全 不 透明 的 。 如 果 纹 理 需 要 有 完整 的 透明 度 值 ， 除 了 RGBA8888 格 式 还 可 以 使 用 RGBA4444， 它 允许 每 一 个 像素 值 有 
127 个 Alpha 值 ， 因 此 透明 效率 与 RGBA8888 格 式 的 纹理 差别 不 是 很 大 。 但 是 ， 由 于 颜色 总 量 减少 至 4096， 所 以 ，RBGA4444 是 16 位 图 片 格式 里 面 颜色 质量 最 差 的 。 但 是 TexturePacker 可 以 帮助 我 们 ， 选 
择 “ 抖 动 ” 来 提高 图 片 质量 ， 如 图 4-16 所 示 。 


Image format | RGBA4444 


Dithering | FlovdSteinbergAlpha 


图 4-16 设置 RBGA4444 时 需要 设置 的 “抖动 ” 


如 图 4-17 所 示 的 界面 是 设置 图 片 的 最 大 尺寸 ， 生 成 的 图 片 的 大 小 (Scale 选项 ) 内 容 。 


v Geometry 
Max size 


Fixed size 


Size constraints 


Force squared 


Force word aligned 


Scale 


Scale mode 


94-17 图 片 尺寸 等 相关 设置 的 面板 


其 中 的 大 小 限制 选项 可 以 设置 图 片 大 小 是 否 是 2 的 n 次 方 的 井 ， 在 Cocos2D 1-X 的 时 候 ， 你 必须 在 ccConfig.h 文 件 中 开启 对 NPOT 的 支持 ， 但 是 Cocos2D 2-X 就 不 需要 了 ， 它 默认 是 支持 NPOT 的 。 使 用 
NPOT 的 纹理 ， 可 以 允许 TexturePacker 更 好 地 压缩 纹理 ， 更 少 地 浪费 纹理 图 集 的 空白 区 域 ， 会 减少 1%~49% 的 内 存 。 


之 所 以 需要 设置 最 大 的 尺寸 ， 是 因为 有 些 机 器 有 最 大 贴图 的 大 小 限制 ， 比 如 iPhone 2 要 求 图 片 最 大 不 能 超过 1024x1024， 设 置 了 这 个 最 大 值 之 后 ， 如 果 整 个 图 片 超过 这 个 尺寸 ， 会 在 生成 图 片 时 报错 ， 
并 且 下 方 也 会 有 红色 的 提示 来 提醒 超过 了 设置 的 大 小 学 围 ， 这 时 需要 重新 设置 大 小 或 者 分 成 更 多 的 批 次 来 处 理 。 


片 排 布 相关 选项 的 面板 如 图 4-18 所 示 。 


Algorithm 可 以 选择 排列 图 片 的 算法 ， 目 前 推荐 的 是 MaxRects， 即 按 精灵 尺寸 大 小 排列 ，Border/shape padding 是 设置 精灵 与 精灵 之 间 的 间隔 ， 有 时 候 在 游戏 中 发 现 精 灵 上 有 一 些 杂 图 的 时 候 ， 可 以 
增加 这 个 精灵 之 间 的 间隔 ， 防 止 图 片 之 间 的 互相 影响 。Extrude 是 设置 贴图 边界 的 重复 像素 个 数 。 这 个 与 间隔 是 相对 应 的 ， 如 果 游 戏 中 发 现 精灵 边缘 上 有 一 些 透 明 的 小 点 点 ， 就 可 以 把 这 个 值 设置 大 一 点 。 把 
Trim mode 栏 设置 成 Trim 是 移 除 精灵 四 周 的 透明 区 域 ， 去 掉 这 些 透 明 区 域 可 以 使 贴图 间 更 加 紧凑 ,减少 图 片 的 尺寸 。 另 外 一 个 比较 有 用 的 选项 是 Allow rotation， 勾 选 这 个 选项 可 以 允许 贴图 在 拼 板 中 旋 
转 ， 更 好 地 节约 空间 。 但 是 在 之 前 版 本 的 Cocos2D-X 中 ， 勾 上 这 个 选项 可 能 会 产生 问题 ， 即 贴图 在 程序 中 不 会 转 回来 了 ， 这 时 要 把 这 个 勾 选 去 掉 。 


Layout 
Algorithm 
Heuristics 
Pack 
Multipack 
Border padding 
Shape Padding 
Inner Padding 


Extrude 


Common divisor 


Reduce border artifacts 


Allow rotation 


Trim mode 


eshold 


Trim / Crop Тїї 


Shape outlines 
Enable auto alias 


Heuristic mask 


4.4.2 ”通过 优化 降低 游戏 尺寸 的 万 法 


GJ 
z 
Д 
iE 4k 


2 
ccr 
4b 


oo A»A— |f 


| zn | — um 77 
x 1 vl 5j 
| 
[== | 
| Trim $ | 
| B 


图 4-18 图 片 排 布 相关 选 项 面板 


方法 一 : Cocos2D-X 中 的 纹理 加 载 分 为 两 个 阶段 : 第 一 个 阶段 从 图 片 文件 中 创建 一 个 Image 对 象 ; 第 二 阶段 以 这 个 创建 的 Image 对 象 来 创建 Texture2D 对 象 。 这 意味 着 ， 当 一 个 纹理 被 加 载 的 时 候 ， 在 
短 时 候 内 ， 会 消耗 两 倍 于 它 本 身 内 存 占用 的 内 存 大 小 。 在 一 个 函数 体内 连续 加 载 纹理 的 时 候 ， 就 会 有 内 存 问题 。 因 为 在 这 个 方法 还 没 结束 之 前 ， 每 一 个 纹理 都 会 消耗 两 倍 于 它 本 身 的 内 存 ， 所 以 最 好 使 用 预 


加 载 的 办 法 ， 


方法 二 : 


片 是 背景 


AERSEE, 


并 且 避 免 在 场景 进行 过 程 中 大 量 进行 图 片 加 载 和 读 取 工 作 。 


图 片 格式 问题 需要 一 个 平衡 ，JPG 格 式 的 图 片 大 小 更 小 ， 而 因为 在 读 取 的 过 程 中 JPG 会 时 时 转化 成 PNG 格 式 的 图 片 ， 也 就 是 说 内 存 中 某 时 会 同时 存在 同一 图 片 的 两 种 格式 图 片 ， 但 是 当 你 的 图 
或 者 常 驻 内 存 的 图 的 时 候 ， 读 取 时 的 一 刹那 的 膨胀 也 就 不 重要 了 ， 没 有 不 合适 的 格式 ， 关 键 要 因地制宜 。 


方法 三 : 最 快速 地 减少 纹理 内 存 占用 的 办 法 就 是 把 它们 作为 16 位 颜色 深度 的 纹理 来 加 载 。Cocos2D 默 认 的 纹理 像素 格式 是 32 位 颜色 深度 。 如 果 把 颜色 深度 减 半 ， 那 么 内 存 消耗 也 就 可 以 减少 一 半 。 并 且 


这 还 会 带 来 泻 染 效率 的 提升 ， 大 约 提 高 10%。 


方法 四 : 化 整 为 零 法 。 对 于 比较 大 的 图 片 ， 可 以 拆 分 成 比较 小 的 图 素 ， 如 果 图 片 是 对 称 的 ， 可 以 裁 成 原来 的 一 半 或 者 四 分 之 一 ， 然 后 在 程序 中 通过 设置 镜像 来 拼接 。 增 加 图 片 的 数量 会 减少 占用 内 存 的 
大 小 ， 但 是 会 增加 绘制 次 数 降低 效率 ， 可 以 通过 使 用 自动 批 处 理 来 解决 。 


方法 五 : PVR 是 最 灵活 的 纹理 文件 格式 。 除 了 支持 标准 的 未 压缩 的 RGB 图 片 格式 外 ， 还 支持 有 损 压 缩 的 PVRTC 格 式 。 另 外 ， 未 压缩 的 PVR 格式 的 纹理 的 内 存 消耗 非常 低 。 不 像 PNG 图 片 那样 要 消耗 两 倍 


TexturePacker 设 计 的 。 在 TexturePacker 里 面 ， 这 是 它 生 成 的 最 小 的 PVR 文件 。 而 且 pvr.ccz 格 式 比 其 他 任何 文件 格式 的 加 载 速度 都 要 快 。 


方法 六 : TextureCache 类 还 支持 异步 加 载 资源 的 功能 ， 利 用 addlmageAsync 方 法 。 可 以 很 方便 地 给 addlmageAsyn< 方 法 添加 一 个 回调 方法 ， 这 样 ， 当 纹理 异步 加 载 结束 的 时 候 ， 可 以 得 到 通知 。 


45 本章 小 结 


本 章 介 绍 Cocos2D-X 中 演 染 图 片 相 关 的 类 ， 包 括 精灵 类 、 九 宫 格 精灵 类 等 ， 后 半 部 分 介绍 如 何 减少 贴图 所 占 空间 的 大 小 。 下 一 章 介 绍 Cocos2D-X 中 的 动画 ， 让 静态 的 图 片 动 起 来 。 


第 5 草 ”Cocos2D-X 中 的 动作 、 特 效 与 动画 


上 一 章 我 们 介绍 了 Cocos2D-X 的 基础 类 和 贴图 类 ， 包 括 Node 节 点 类 、Director 导 演 类 、Scene 场 景 类 、Layer 布 景 层 和 Sprite 精 灵 类 等 ， 这 些 类 都 是 构成 游戏 画面 的 基本 元 素 ， 但 是 游戏 不 仪 是 由 静态 
画面 构成 的 ， 更 多 的 时 人 息 ， 游 戏 是 动态 效果 的 呈现 ， 所 以 动作 、 特 效 和 动画 即 是 游戏 区 别 于 应 用 的 特点 ， 又 是 决定 游戏 质量 的 关键 一 环 ， 因 此 ， 决 定 一 个 二 维 游戏 引擎 的 好 坏 的 重要 因素 也 是 引擎 对 动作 、 
特效 和 动画 的 支持 程度 。Cocos2D-X 支 持 很 多 动作 和 特效 ， 并 且 有 自己 的 动画 类 ， 本 章 我 们 就 来 介绍 这 些 内 容 ， 让 你 的 游戏 “ 动 ”起 来 。 


5.1 动作 类 


和 之 前 介绍 的 内 容 不 同 ，Cocos2D-X 的 动作 类 Action 并 不 是 一 个 在 屏幕 中 显示 的 对 象 ， 动 作 必 须 依托 于 Node 节 点 类 及 其 子 类 的 实例 才能 发 挥 作 用 ，Cocos2D-X 的 动作 不 仅 包 括 位 置 移动 等 ， 也 包括 跳 


跃 ， 甚 至 是 对 象 颜 色 的 渐变 ， 图 5-1 是 Action 动 作 类 的 继承 示意 图 。 
Action 
FiniteTimeAction Follow Speed 


Actioninstant Actioninterval 


图 5-1 Action 动作 类 的 继承 示意 图 
Action 动 作 类 继承 于 Ref 对 象 类 ， 有 三 个 子 类 : 有 限时 间 动作 、 跟 随 、 移 动 速度 ， 其 中 有 限时 间 动作 分 为 瞬时 动作 (Actionlnstanse) 和 延 时 动作 (Actionlnterval) ， 在 本 节 的 后 部 分 ， 将 详细 介绍 党 
用 的 动作 ， 首 先 来 看 Action 类 的 主要 成 员 数 据 和 函数 等 。 


5.1.1 Action 类 的 主要 成 员 数 据 和 函数 


Action 类 的 主要 保护 成 员 数 据 如 表 5-1 所 示 。 
表 5-1 Action 类 的 主要 保护 方法 
名 ЖҰ 类 型 п 绍 
执行 动作 的 源 目标 ， 即 上 一 个 执行 此 动作 的 目标 
执行 动作 的 目标 
动作 标签 但 


m Originallarget 


m Target 


m Tag 


Action 类 的 主要 公共 函数 如 表 5-2 所 示 。 


表 5-2 ”Action 类 的 主要 公共 有 函数 


函数 名 返回 类 型 п A 


isDone 布尔 型 动作 是 否 完 成 
stop 执行 动作 完成 后 会 调用 的 方法 ， 你 可 以 重 写 这 个 方法 
m nTag 5M ERE IH 
startWithTarget 设置 执行 的 动作 目标 
每 帧 都 会 调用 的 方法 ， 如 果 你 需要 在 每 控制 动作 则 需要 重 写 ， 时 间 间 陋 
ii 为 动作 间隔 时 间 
可 以 设置 时 间 参 效 ，0 为 动作 刚 开 始 时 调用 ，0.5 为 进行 到 一 半 时 调用 ， 
кые 1 为 完成 时 调用 
getTarget 获得 执行 动作 目标 
setTarget 25 设置 执行 动作 目标 
getOriginalTarget DAX 获得 执行 动作 源 目标 
setOriginalTarget 设置 执行 动作 源 目 标 ， 可 以 为 空 
getTag 整 型 获得 标签 值 
setTag 2 Б 54А 


下 面 来 看 具体 的 动作 的 使 用 。 


5.1.2 ”基本 动作 


Action 的 子 类 FiniteTimeAction 的 子 类 分 为 瞬时 动作 (ActionInstanse) 和 延 时 动作 (ActionInterval) ， 其 中 瞬时 动作 (Actionlnstanse) 的 子 类 如 表 5-3 所 示 。 


表 5-3 瞬时 动作 


瞬时 动作 п A 
CallFunc ТАЛ y In is] eR C 
FilpX X 翻转 
FilpY Y 翻转 
Hide SET 
Place REME 
ReuseGrid 重用 网 格 
Show 显示 
StopGrid ^r IE WU 
ToggleVisibility 可 见 切 换 


顺 时 动作 顾名思义 ， 就 是 直接 调用 结果 的 动作 ， 这 中 间 不 产生 任何 动画 效果 ， 其 中 的 执行 回调 函数 后 面 会 详细 介绍 ， 延 时 动作 (ActionInterval) 则 不 同 ， 它 会 形成 动画 过 程 的 子 类 ， 如 表 5-4 所 示 。 


Ж5-4 延 时 动作 


延 时 动作 7 组 
册 考 尔 曲 线 ， 稀 动 固定 的 距离 ， 它 有 一 个 了 于 类 BezierTo 也 是 贝 塞 尔 曲 线 ， 移 动 


Шы 到 固定 的 点 上 

Blink [ДЖ 

DelayTime ЖЕТА 

FadeTo AE BH 

MoveTo 移动 到 目的 点 ， 有 子 类 MoveBy，x, у fill br rm НЛ НУНА ШЕ E 

TET 移动 到 相应 的 角度 。 有 于 类 RotateBy， 移 动 相应 的 角度 ， 是 在 目前 角度 基础 上 
加 上 相对 值 

FadeIn 由 无 变 亮 

FadeOut 由 亮 变 无 

按 抛 物 线 轨迹 移动 相应 距离 ， 参 数 是 相对 的 距离 ， 有 子 类 JumpTo 跳跃 到 某 个 固 
定 的 位 置 

Sequence 动作 厅 列 

Spawn 合并 多 个 动作 ， 使 多 个 动作 同时 进行 

ScaleTo 缩放 到 原来 的 固定 倍 效 ， 有 于 类 ScaleBy， 缩 放 相 对 的 倍数 

TintTo 色调 变化 到 

TintBy 色调 变化 相对 数值 

Animate 动画 

ReverseTime 时 间 逆 问 

Repeat 有 限 次 数 重 复 

RepeatForever ERRER 

ActionEase 变速 移动 

ActionCamera 摄像 机 动作 

SkewTo THER 21] EXE HS EA 有 于 类 SkewBy， 移 动 相对 的 参数 

TargetedAction 动作 的 目标 并 不 一 定 是 动作 的 执行 者 动作 

CardinalSplineTo 基 样 曲线 移动 到 相应 位 置 ， 也 有 CardinalSplineBy 等 其 他 子 类 

DeccelAmplitude AMARESA E, METE, A IER 

AccelAmplitude 有 相应 幅度 参数 的 动作 ， 附 市 动作 时 间 ， 有 加 速效 果 

AccelDeccelAmplitude 有 相应 幅度 参数 的 动作 ， 附 带动 作 时 间 ， 有 变速 效果 


1.MoueTo 和 MoueBy 的 使 用 
下 面 来 看 一 些 动 作 类 的 使 用 实例 ， 首 先 来 看 MoveTo 和 MoveBy 的 使 用 ， 浏 览 代码 清单 5-1， 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionMove 类 的 onEnter 函 数 。 


代码 清单 5-1 MoveTo 和 MoveBy 的 使 用 


= 


void ActionMove::onEnter() 


{ 


ActionsDemo::onEnter(); 


/ 
centerSprites (3); 
/ 
获得 屏幕 尺寸 
auto s = Director::getInstance()-»getWinSize(); 
// 
创建 移动 动画 
auto actionTo = MoveTo::create(2, Point(s.width-40, s.height-40)); 
auto actionBy = MoveBy::create(2, Point(80,80)); 
auto actionByBack = actionBy-»reverse|(); 
Js 
运行 动画 


tamara-»runAction (actionTo); 


 grossini-»runAction (Sequence: :create (actionBy, 
actionByBack, NULL)); 
_ kathia-»runAction (MoveTo::create(1, Point(40,40))); 


) 


分 别 定义 了 MoveTo 和 MeoveBy 的 实例 ， 之 前 已 经 说 过 MoveBy 是 MoveTo 的 子 类 ，MoveTo 是 移动 到 目标 位 置 ， 而 MoveBy 是 从 目前 的 基础 上 移动 到 目标 位 置 上 上。 创建 函数 create 的 第 一 个 参数 是 时 
间 ， 第 二 个 参数 是 位 置 对 象 。 动 作 调用 reverse 会 返回 另外 一 个 动作 ， 是 这 个 动作 的 倒置 ， 而 精灵 类 实例 在 调用 runAction 函 数 时 也 会 有 不 同 ，m_grossini 精 灵 就 是 使 用 的 动作 序列 Sequence，Seduence 动 
作 序 列 的 定义 是 由 多 个 动作 构成 ，create 函 数 中 以 NULL 参 数 作 结尾 ， 效 果 是 作为 参数 传 入 的 动作 会 顺序 执行 ， 运 行 效果 如 图 5-2 所 示 。 


Actions [est 


MoveTo / MoveBy 


MainMenu 


图 5-2 ”移动 动作 运行 效果 


ScaleTo 和 ScaleBy 的 使 用 见 代 码 清单 5-2， 该 段 代 码 出 自 tests 项 目 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionScale 类 的 onEnter 函 数 。 


void ActionScale::onEnter() 


{ 


ActionsDemo::onEnter(); 
centerSprites (3); 


auto actionTo = ScaleTo::create(2.0f 
auto actionBy = ScaleBy::create(2.0f „ОЁ, : 08); 
auto actionBy2 = ScaleBy::create(2.0f, 5.0f, 1.0#); 


 grossini-»runAction (actionTOo); 
 tamara-»runAction (Sequence: :create (actionBy, 
actionBy-»reverse(), NULL)); 
kathia-»runAction (Sequence: :create (actionBy2, 
actionBy2-»reverse(), NULL)); 


кә 


分 别 定义 了 ScaleTo 和 ScaleBy 实 例 ， 之 前 已 经 说 过 ScaleBy 是 ScaleTo 的 子 类 ，ScaleTo 是 缩放 到 相应 比例 ，ScaleBy 是 在 目前 基础 上 变化 相应 的 缩放 比例 。create 遂 数 ， 可 以 使 用 两 个 参数 或 者 三 个 参 
数 ， 两 个 参数 的 第 一 个 参数 是 时 间 间 隔 ， 第 二 个 参数 是 缩放 比例 。 三 个 参数 的 第 一 个 参数 是 时 间 间 隔 ， 第 二 个 参数 是 x 轴 缩放 比例 ， 第 三 个 参数 是 y 轴 缩放 比例 。 运 行 效果 如 图 5-3 所 示 。 


ActionsTest 
ScaleTo / ScaleBy 


MainMenyu 


图 5-3 ”缩放 动作 使 用 的 效果 


SkewTo 和 SkewBy 的 使 用 见 代 码 清单 5-3， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionSkew 类 的 onEnter 函 数 。 


void ActionSkew: :onEnter () 


{ 


ActionsDemo::onEnter(); 
centerSprites (3); 


// 

创建 动画 
auto actionTo = SkewTo::create(2, 37.2f, -37.2f); 
auto actionToBack = SkewTo::create(2, 0, 0); 
auto actionBy = SkewBy::create(2, 0.0f, -90.0f); 
auto actionBy2 = SkewBy::create(2, 45.0f, 45.0f); 
auto actionByBack = actionBy-»reverse(); 
// 

运行 动画 
tamara-»runAction (Sequence: :create (actionTo, 
actionToBack, NULL)); 
 grossini-»runAction (Sequence: :create (actionBy, 
actionByBack, NULL)); 
// 

运行 动画 
_kathia->runAction (Sequence: :create (actionBy2, 


actionBy2-»reverse(), NULL)); 


e: 


分 别 定义 了 SkewTo 和 SkewBy 实 例 ， 之 前 已 经 说 过 SkewBy 是 SkewTo 的 子 类 ， 二 者 的 关系 和 之 前 类 似 ， 以 By 结尾 的 参数 是 相对 于 目前 的 值 的 过 程 量 ， 以 To 结尾 的 参数 是 绝对 的 参数 ， 不 管 现 有 状态 如 
何 ， 直 接 将 参数 设置 为 这 个 值 。 三 个 参数 的 第 一 个 参数 是 时 间 间 隔 ， 第 二 个 参数 是 x 轴 扭曲 参数 ， 第 三 个 参数 是 y 轴 扭曲 参数 ， 运 行 效 果 如 图 5-4 所 示 。 
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图 5-4 ”扭曲 动作 使 用 效果 


RotateTo 和 RotateBy 的 使 用 见 代 码 清单 5-4， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionRotate 类 的 onEnter 函 数 。 


void ActionRotate: :onEnter () 


{ 


ActionsDemo::onEnter(); 
centerSprites (3); 


auto actionTo - RotateTo::create(2, 45); 
auto actionTo2 = RotateTo::create(2, -45); 
auto actionToO0 = RotateTo::create(2 , 0); 
// 

运行 动画 
 tamara-»runAction (Sequence: :create (actionTo, actionTo0, NULL)); 
// 

创建 动画 
auto actionBy = RotateBy::create(2 , 360); 
auto actionByBack = actionBy-»reverse|(); 
a 

运行 动画 
 grossini-»runAction (Sequence: :create (actionBy, 
actionByBack, NULL)); 


 kathia-»runAction (Sequence: :create (actionTo2, 
actionTo0-»clone(), NULL)); 


—— 


分 别 定义 了 RotateTo 和 RotateBy 实 例 ， 之 前 已 经 说 过 RotateBy 是 RotateTo 的 子 类 ， 二 者 的 天 系 和 之 前 类 似 。 两 个 参数 的 第 一 个 参数 是 时 间 间 隔 ， 第 二 个 参数 是 旋转 角度 角度 值 ， 运 行 效果 如 图 5-5 所 


人 小。 
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图 5-5 ”旋转 动作 运行 效果 


JumpTo 和 JumpBy 的 使 用 见 代 码 清单 5-5， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionJump 类 的 onEnter 函 数 。 


void ActionJump::onEnter () 


{ 


ActionsDemo::onEnter(); 
centerSprites (3); 


// 

创建 动画 
auto actionTo = JumpTo::create(2, Point(300,300), 50, 4); 
auto actionBy - JumpBy::create(2, Point(300,0), 50, 4); 
auto actionUp = JumpBy::create(2, Point(0,0), 80, 4); 
auto actionByBack = actionBy-»reverse|(); 
// 

运行 动画 


 tamara-»runAction (actionTo); 
 grossini-»runAction (Sequence: :create (actionBy, 
actionByBack, NULL)); 

 kathia-»runAction (RepeatForever::create (actionUp)); 


} 


分 别 定义 了 JumpTo 和 JumpBy 实 例 ， 之 前 已 经 说 过 JumpTo 是 JumpBy 的 子 类 ， 二 者 的 天 系 和 之 前 类 似 。 四 个 参数 的 第 一 个 参数 是 时 间 间 隔 ， 第 二 个 参数 JumpTo 是 目标 位 置 的 绝对 坐标 ，JumpBy 是 相 
对 于 目前 位 置 的 相对 坐标 ， 第 三 个 参数 为 跳跃 高 度 ， 第 四 个 参数 是 跳跃 的 次 数 ， 运 行 效果 如 图 5-6 所 示 。 
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图 5-6 ”跳跃 动作 运行 效果 


BezierTo 和 BezierBy 的 使 用 见 代码 清单 5-6， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionBezier 类 的 onEnter 函 数 。 


void ActionBezier::onEnter() 


{ 


ActionsDemo::onEnter(); 
auto s = Director::getInstance()-»getWinSize(); 
centerSprites (3); 


/ / 

初始 化 贝 塞 尔 曲线 的 参数 
ccBezierConfig bezier; 
/ / 

控制 点 1， 

波峰 


bezier.controlPoint 1 = Point(0, s.height/2); 
// 
控制 点 2， 
波峰 


bezier.controlPoint 2 = Point(300, -s.height/2); 


结束 点 
bezier.endPosition = Point (300,100); 


/ 
创建 贝 塞 尔 曲线 动作 
auto bezierForward = BezierBy::create(3, bezier); 
auto bezierBack = bezierForward-»reverse(); 


auto rep - RepeatForever::create (Sequence: :create (bezierForward, 
bezierBack, NULL)); 


/ / 
另外 一 个 精灵 设置 开始 位 置 和 初始 化 贝 塞 尔 曲线 参数 
tamara-»setPosition (Point (80,160)); 
ccBezierConfig bezier2; 
bezier2.controlPoint 1 - Point(100, s.height/2); 
bezier2.controlPoint 2 - Point(200, -s.height/2); 
bezier2.endPosition = Point (240,160); 


// 
创建 动作 


auto bezierTol = BezierTo::create(2, bezier2); 


ri 

设置 精灵 初始 位 置 和 贝 塞 尔 曲线 动作 
_kathia->setPosition (Point (400,160)); 
auto bezierTo2 = BezierTo::create (2, bezier2); 


运行 动作 
 grossini-»runAction (гер); 
 tamara-»runAction (bezierTol); 
_ kathia-»runAction (bezierTo2); 


BezierTo 和 BezierBy 都 是 贝 塞 尔 曲线 动作 ， 它 们 的 create 函 数 没有 什么 区 别 ， 都 是 两 个 参数 ， 第 一 个 参数 依然 是 动作 时 间 ， 第 二 个 参数 是 贝 塞 尔 曲线 的 配置 系数 ， 贝 塞 尔 曲线 是 应 用 于 二 维 图 形 应 用 程 
序 的 数学 曲线 ， 贝 赛 尔 曲线 的 每 一 个 顶点 都 有 两 个 控制 点 ， 用 于 控制 在 该 顶点 两 侧 的 曲线 的 弧度 。 贝 塞 尔 曲线 如 图 5-7 所 示 。 


cCBezierConfig 贝 塞 尔 曲线 的 三 个 参数 需要 配置 ， 前 两 个 是 控制 点 ， 最 后 是 终点 ， 其 中 终点 在 BezierTo 和 BezierBy 两 个 类 中 的 运行 结果 不 同 ， 依 然 是 BezierTo 的 终点 是 绝对 位 置 ， 而 BezierBy 是 相对 于 
目前 位 置 的 相对 位 置 。 控 制 点 的 设置 分 别 控制 在 路 径 上 的 高 峰 和 低谷 的 位 置 ， 如 果 需 要 走 的 路 径 和 图 中 方向 一 致 ， 就 分 别 把 两 个 控制 点 的 纵 坐 标 设置 为 一 正 一 负 ， 控 制 点 纵 坐 标的 正 负 决定 是 向 下 走 还 是 向 
上 走 ， 绝 对 值 决定 移动 的 幅度 。 而 横 坐 标 是 横 坐 标的 移动 ， 该 值 对 于 BezierBy 是 相对 于 目前 位 置 的 相对 位 置 ， 而 对 于 BezierTo 的 终点 是 绝对 位 置 。 如 果 需 要 图 中 曲线 旋转 90 度 的 路 径 ， 就 分 别 把 两 个 控制 点 
的 横 坐 标 设置 为 一 正 一 负 即 可 ， 然 后 按 x 轴 和 y 轴 的 要 求 交换 。 范 例 运行 效果 如 图 5-8 所 示 。 
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5-65 贝 塞 尔 曲线 动作 运行 效果 


Fadeln 和 FadeOut 的 使 用 见 代 码 清单 5-7， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionFade 类 的 onEnter 函 数 。 


void ActionFade::onEnter() 


{ 


ActionsDemo::onEnter(); 
centerSprites (2); 


/ / 
设置 透明 度 
tamara-»setOpacity (0 ) 
创建 淡 入 动作 
uto actionl = FadeIn::create(1.0f); 
uto actionlBack = actionl-»reverse(); 
/ 
出 动作 


uto action2 = FadeOut::create(1.0f); 

uto action2Back = action2-»reverse(); 

uto action2BackReverse = action2Back-»reverse(); 

uto action2BackReverseReverse = action2BackReverse-»reverse(); 
/ 
iil 

tamara-»setOpacity (122); 

 tamara-»runAction (Sequence::create(actionl, actionlBack, NULL)); 
kathia-»setOpacity (122); 
 kathia-»runAction (Sequence: :create (action2, action2Back, 
action2BackReverse,action2BackReverseReverse, NULL)); 


Im 
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Fadeln 和 FadeOut 分 别 是 淡 入 和 淡出 ， 这 里 需要 说 明 的 是 淡 入 首先 要 将 透明 度 设置 为 0。 范 例 运 行 效果 如 图 5-9 所 示 。 
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图 5-9” 淡 入 和 淡出 动作 运行 效果 


闪烁 动作 Blink， 其 create 函 数 有 两 个 参数 ， 第 一 个 参数 为 动作 时 间 ， 第 二 个 参数 是 闪烁 次 数 ， 使 用 请 见 代码 清单 5-8， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionBlink 
类 的 onEnter 函 数 。 


void ActionBlink::onEnter() 


{ 


ActionsDemo::onEnter(); 
centerSprites (2); 


auto actionl = Blink::create(2, 10); 
auto action2 - Blink::create(2, 5); 


 tamara-»runAction (actionl); 
 kathia-»runAction (action2); 


ce 


TintTo 和 TintBy 的 使 用 见 代 码 清单 5-9， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionTint 类 的 onEnter 函 数 。 


void ActionTint::onEnter() 


{ 


ActionsDemo::onEnter(); 
centerSprites (2); 


auto actionl = TintTo::create(2, 255, 0, 255); 
auto action2 - TintBy::create(2, -127, -255, -127); 
auto action2Back = action2-»reverse(); 


 tamara-»runAction (actionl); 
 kathia-»runAction (Sequence::create(action2, action2Back, NULL)); 


e 


分 别 定义 了 TintTo 和 TintBy 实 例 ， 第 一 个 参数 是 动作 时 间 ， 后 三 个 参数 分 别 是 颜色 的 [、g、b 值 ，TintTo 是 直接 设置 色 值 ，TintBy 是 在 目前 值 上 加 上 相应 的 值 ， 运 行 效果 如 图 5-10 所 示 。 
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5-10 色 值 变化 动作 运行 效果 


在 动作 中 也 有 一 个 摄像 机 动作 类 OrbitCamera， 它 是 摄像 机 环绕 屏幕 中 心 旋 转 所 形成 的 动作 。 首 先 来 看 代码 清单 5-10， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 
ActionOrbit 类 的 onEnter 国 数 。 


void ActionOrbit::onEnter() 


{ 


ActionsDemo::onEnter(); 


// 

设置 投影 
Director::getInstance()-»setProjection( 
Director::Projection:: 2D); 
centerSprites (3); 


/ 
创建 动画 
auto orbitl = OrbitCamera::create(2,1, 0, 0, 180, 0, 0); 
auto actionl = Sequence::create( 


orbit1, 
orbitl-»reverse(), 
nullptr); 


auto orbit2 = OrbitCamera::create(2,1, 0, 0, 180, -45, 0); 
auto action2 = Sequence::create( 

orbit2, 

orbit2-»reverse(), 

nullptr); 
auto orbit3 = OrbitCamera::create(2,1, 0, 0, 180, 90, 0); 
auto action3 - Sequence::create( 

orbit3, 

orbit3-»reverse(), 

nullptr); 


// 


运行 动画 

kathia->runAction (RepeatForever::create (action1)); 
tamara-»runAction (RepeatForever::create (action2)); 
grossini-»runAction (RepeatForever::create (action3)); 


// 

创建 动画 
auto move = MoveBy::create(3, Point(100,-100)); 
auto move back = тоуе->геуегѕе (); 
auto seq = Sequence::create (move, move back, NULL); 
auto rfe RepeatForever::create (seq); 
// 

运行 动画 
_kathia->runAction (rfe); 
 tamara-»runAction (rfe-»clone() ); 
 grossini-»runAction (rfe-»clone() ); 


ENT 


旋转 的 坐标 描述 采用 了 球 坐标 ， 球 坐标 采用 球面 半径 、 与 x 轴 夹 角 、 与 z 轴 夹 角 这 几 个 值 来 描述 坐标 点 ， 如 图 5-11 所 示 。 


X 


图 5-11 球 坐 标 描述 


OrbitCamera 类 的 创建 函数 create， 有 7 个 参数 ， 第 一 个 参数 是 动作 的 时 间 ， 第 二 、 三 个 参数 是 起 始 的 坐标 值 中 的 半径 和 过 程 中 的 坐标 值 中 的 半径 ， 第 四 、 五 个 参数 是 起 始 的 坐标 值 中 的 与 z 轴 夹 角 和 过 
程 中 的 坐标 值 中 的 与 z 轴 夹 角 ， 第 六 、 七 个 参数 是 起 始 的 坐标 值 中 的 与 x 轴 夹 角 和 过 程 中 的 坐标 值 中 的 与 x 轴 夹 角 。 实 例 运行 效果 如 图 5-12 所 示 。 


注意 ”在 使 用 摄像 机 旋转 时 ， 当 旋转 时 ， 如 果 正 在 旋转 的 这 个 节点 后 面 还 有 其 他 节点 ， 可 能 会 出 现 旋 转 的 节点 只 有 一 部 分 显示 出 来 的 这 种 情况 ， 这 时 关闭 OpenGIL 的 深度 检测 ， 只 需要 获得 导演 类 并 调用 
setDepthTest 设 置 为 false 即 可 ， 如 下 代码 所 示 : 


Director::getInstance() -»setDepthTest (false) 
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图 5-12 ”摄像 机 动作 实例 运行 效果 


在 游戏 中 ， 有 时 希望 使 用 一 些 非常 规 轨迹 能 描述 的 运动 轨迹 ， 我 们 希望 只 是 “告诉 ”游戏 对 象 几 个 离散 的 点 ， 游 戏 对象 就 可 以 根据 这 些 离散 的 点 模拟 出 相应 的 路 径 。 当 然 ， 有 相应 的 公式 模拟 出 这 条 曲 
线 ， 就 是 基本 样 条 ，Cocos2D-X 中 用 沿 基 本 样 条 路 径 移 动 动作 CardinalSplineTo 类 和 它 的 子 类 实现 这 样 的 功能 ， 它 的 继承 关系 如 图 5-13 所 示 。 


CardinalSplineTo 
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图 5-13 ”基本 样 条 动作 继承 关系 


其 中 CardinalSplineTo 和 CardinalSplineBy 的 关系 和 之 前 以 “To” 和 “By” 的 联系 类 似 ，CatmullRomTo 和 CatmullRomBy 也 是 这 样 的 ， 它 们 都 是 采用 的 基本 样 条 的 公式 ， 不 同 的 是 ，CatmullRomTo 
和 CatmullRomBy 的 拉力 系数 是 0.5， 而 之 前 的 CardinalSplineTo 和 CardinalSplineBy 的 拉力 系数 是 可 以 自 定义 的 。 


首先 来 看 CardinalSplineTo 和 CardinalSsplineBy 的 用 法 ， 来 看 代码 清单 5-11， 该 段 代 码 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionCardinalSpline 类 的 onEnter 函 数 。 


代码 清单 5-11 CardinalSplineTo 和 CardinalSplineBy 的 用 法 


void ActionCardinalSpline::onEnter () 


{ 


ActionsDemo::onEnter(); 
this-»centerSprites (2); 
auto s = Director::getInstance()-»getWinSize(); 


// 
创建 控制 路 径 的 控制 点 
auto array = РоіпіАггау::сгеаїе (20); 
array-»adaControlPoint (Point (0, 0)); 
array-»addaControlPoint i 
array->addControlPoint 
array->addControlPoint 
array->addControlPoint 


// 
创建 动作 


( 
(s.width/2-30, s.height-80)); 
Point(0, s.height-80)); 

Point(0, 0)); 


auto action = CardinalSplineBy::create(3, array, 0); 
auto reverse = action-»reverse(); 
// 
将 动作 放 入 动作 序列 
auto seq = Sequence::create(action, reverse, NULL); 
/ 
设置 位 置 
_tamara->setPosition (Point (50, 50)); 
тыы 0 
运行 动画 
 tamara-»runAction (seq); 
/ / 
创建 动作 
auto action2 = CardinalSplineBy::create(3, array, 1); 
auto reverse2 - action2-»reverse(); 
/ / 
动作 序列 
auto seq2 = Sequence::create(action2, reverse2, NULL); 
i 
设置 位 置 
_kathia->setPosition (Point (s.width/2, 50)); 
/ / 
运行 动画 
 kathia-»runAction (ѕед2); 
/ / 
数组 处 理 


array = array; 
array-»retain(); 


首先 定义 一 个 点 数组 ， 把 路 径 的 点 放 入 点 数组 中 ， 创 建 基本 样 条 动作 时 ，3 个 参数 分 别 是 动作 时 间 、 点 数组 、 拉 力 系数 。CardinalSplineTo 和 CardinalSplineBy 的 区 别 ， 由 于 CardinalSplineTo 是 绝对 
的 ，CardinalSplineBy 是 相对 的 ，CardinalSplineBy 的 点 数组 的 第 一 个 点 最 好 设置 为 (0,0) ， 否 则 起 始点 会 被 忽略 掉 。 可 以 重 写 布景 层 的 draw 函 数 来 把 路 径 画 出 来 。 


来 看 代码 清单 5-12， 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionCard-inalSpline 类 的 draw 函 数 。 


代码 清单 5-12 ” 画 基 本 样 条 路 径 


void ActionCardinalSpline::draw(Renderer *renderer, 
const kmMat4 &transform, bool transformUpdated) 


{ 


ActionsDemo::draw(renderer, transform, transformUpdated); 


// 
绘制 偏 移 
GLPushMatrix(); 

GLTranslatef (50, 50, 0); 
GLGetMatrix (KM GL MODELVIEW, & modelViewMV1); 
GLPopMatrix(); 

to s = Director::getInstance()-»getWinSize(); 
G 

G 

G 


LPushMatrix(); 

LTranslatef (s.width/2, 50, 0); 
LGetMatrix(KM GL MODELVIEW, & modelViewMV2); 
GLPopMatrix(); 


泻 染 指令 初始 化 

_CustomCommand.init( globalZOrder); 

_CustomCommand.func = CC CALLBACK 0(ActionCardinalSpline::onDraw, 
this, transform, transformUpdated); 


2333367333 


泻 染指 令 提交 
renderer-»addCommand (& customCommand); 


} 


记 住 ， 由 于 CardinalsplineBy 的 坐标 是 相对 的 ， 首 先 平 移 到 起 始点 上 ， 再 开始 画 ， 示 例 运行 效果 如 图 ?5-14 所 示 。 
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图 5-14 基本 样 条 移动 动作 运行 效果 


再 来 看 CatmullIRomTo 和 CatmullRomBy 的 用 法 。 代 码 清单 5-13 出 自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionCatmullIRom 类 的 onEnter 函 数 。 


void ActionCatmullRomStacked::onEnter() 


{ 


ActionsDemo::onEnter(); 
this-»centerSprites (2); 


auto s = Director::getInstance()-»getWinSize(); 
4 
设置 初始 位 置 
 tamara-»setPosition (Point (50,50)); 
/ / 
设置 路 径 上 的 点 
auto array = PointArray::create (20); 


array-»adaControlPoint (Point (0,0)); 


array-»addControlPoint (Point (80,80)); 
array-»addaControlPoint (Point (s.width-80,80)); 
array-»adaControlPoint (Point (s.width-80,s.height-80)); 


array-»addaControlPoint (Point (80,80)); 
array-»addControlPoint s.width/2, s.height/2)); 


// 
创建 动作 


( ( 

( ( 

( ( 
array-»addaControlPoint (Point (80,s.height-80)); 

( ( 

( ( 


auto action = CatmullRomBy::create(3, array); 
auto reverse = action-»reverse(); 
// 
创建 动作 序列 
auto seq = Sequence::create(action, reverse, NULL); 
// 
运行 动画 
 tamara-»runAction (seq); 
tamara-»runAction( 


RepeatForever::create( 

Sequence: :create( 
MoveBy: :create (0.05f 
MoveBy: : create (0.05f 
NULL))); 


// 

获得 位 置 数组 
auto array2 = PointArray::create (20); 
array2-»addControlPoint (Point(s.width/2, 30)); 
array2-»addControlPoint( t(s.width-80,30)); 
array2-»addControlPoint( t(s.width-80,s.height-80)); 
array2-»addControlPoint (Point (s.width/2,s.height-80)); 
array2-»addControlPoint( t(s.width/2, 30)); 


// 
创建 动作 
auto action2 = CatmullRomTo::create(3, array2); 
uto reverse2 = action2-»reverse(); 


/ 
创建 动作 序列 


uto seq2 = Sequence::create(action2, reverse2, NULL); 


/ 
运行 动画 
kathia-»runAction (ѕед2); 
_kathia->runAction ( 
RepeatForever::create( 

Sequence: :create( 
MoveBy: :create (0.05f 
MoveBy: :create (0.05f 
NULL))); 

array-»retain(); 
 arrayl = array; 
array2-»retain(); 

array2 = аггау2; 


CatmullIRomTo 和 CatmullRomBy 的 用 法 与 之 前 的 那 组 是 一 样 的 ， 只 是 不 需要 第 三 个 拉力 系数 参数 。 二 者 的 区 别 与 之 前 的 也 是 一 样 的 。 也 可 以 重 写 布景 层 的 draw 函 数 来 把 路 径 画 出 来 。 代 码 清单 5-14 出 
自 tests 项 目的 ActionTest 文 件 夹 下 ActionTest.cpp 文 件 中 ActionCatmulIRom 类 的 draw 函 数 。 


void ActionCatmullRomStacked::draw(Renderer *renderer, const kmMat4 &transform, 
bool transformUpdated) 


{ 


ActionsDemo::draw(renderer, transform, transformUpdated); 


// 
绘制 路 径 
kmGLPushMatrix(); 
kmGLTranslatef (50, 50, 0); 
kmGLGetMatrix (KM GL MODELVIEW, & modelViewMV1); 
kmGLPopMatrix(); i 
kmGLGetMatrix(KM GL MODELVIEW, & modelViewMV2); 


// 
初始 化 这 染指 令 
customCommand.init( globalZOrder); 
customCommand.func = 
CC CALLBACK O(ActionCatmullRomStacked::onDraw, this, transform, 
transformUpdateqg); 
// 
提交 演 染 指令 
renderer-»addCommand (& customCommand); 


} 


同样 的 CatmullRomBy 需 要 首先 移动 到 起 点 的 位 置 ， 示 例 运 行 效果 如 图 5-15 所 示 。 


CatmuüllRomBy / CatmullRomTo ~ 


^ 


| | ЕЕС 
Catmull Rom ѕрііпе paths. Testing reverse too | 


k, 
=, 

E 

1 


à 


| 


图 5-15 ”Catmull]Rom 样 条 动作 运行 效果 


2, 
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实现 运动 中 ， 我 们 常常 需要 实现 一 些 加 速度 或 者 减速 度 的 效果 ，Cocos2D-X 引 警 为 我 们 提供 了 相应 的 实现 接口 ， 这 样 我 们 就 无 顷 再 用 原来 的 公式 计算 方法 来 实现 加 减速 度 的 效果 。Ease 系 列 的 方法 改 
变 了 运动 的 速度 ， 但 是 并 没有 改变 总 体 时 间 ， 如 果 整 个 的 action 持 续 5 秒 钟 ， 那 么 整个 的 时 间 仍 然 会 持续 5 秒 钟 。 这 些 action 可 以 被 分 成 3 类 。 


Hi 


- [n actions:action: 开始 的 时 候 加 速 。 
: Out actions:action: 结束 的 时 候 加 速 。 
: InOut actions:action: 开始 、 结 束 的 时 候 加 速 。 
ActionEase 有 很 多 子 类 ， 根 据 不 同 的 缓冲 公式 来 模拟 加 减速 过 程 。 


1) 指数 缓冲 ， 分 别 为 EaseExponentialln、EaseExponentialOut、EaseExponentiallnOut。 速 度 时 间 坐 标 图 如 图 5-16 所 示 。 


5-16 ”指数 缓冲 速度 时 间 坐 标 


2) 赛 因 缓冲 ， 分 别 为 EaseSineln、EaseSineOut、EaseSinelnOut。 速 度 时 间 坐 标 图 如 图 5-17 所 示 。 


图 5-17 ЖЕЖ Л] АА 


3) 跳跃 缓冲 ， 分 别 为 EaseBounceln、EaseBounceOut、EaseBouncelnOut。 速 度 时 间 坐 标 图 如 图 5-18 所 示 。 


图 5-18 ”跳跃 缓冲 速度 时 间 坐 标 


4) 弹性 缓冲 ， 分 别 为 EaseElasticln、EaseElasticOut、EaseElasticlinOut。 速 度 时 间 坐 标 图 如 图 5-19 所 示 。 


图 5-19 ”弹性 缓冲 速度 时 间 坐 标 


5) 回 震 缓冲 ， 分 别 为 EaseBackln、EaseBackOut、EaseBacklnOut。 速 度 时 间 坐 标 图 如 图 5-20 所 示 。 


图 5-20” 回 震 缓冲 速度 时 间 坐 标 


加 上 基本 的 缓冲 动作 ， 一 共 6 个 缓冲 动作 ， 定 义 缓冲 动作 见 代码 清单 -15。 


代码 清单 5-15 ”缓冲 动作 的 使 用 


// 

基本 缓冲 动作 

EaseIn::create (move -»clone(), 2.5#); 
EaseOut::create (move -»5clone(), 2.5#); 
EaselnOut::create (move -»clone(), 0.65f); 


// 

指数 缓冲 动作 

EaseExponentialIn::create (move-»clone()); 
EaseExponentialOut::create (move -»clone() ); 
EaseExponentiallnOut::create (move -»clone() ); 
// 

赛 因 组 冲动 作 


EaseSineIn::create (move ->с1опе()); 
EaseSineOut::create (move -»clone() ); 
EaseSineInOut::create (move -»clone()); 


/ / 

跳跃 缓冲 动作 

EaseBounceIn::create (move ->с1опе()); 
EaseBounceOut::create (move -»clone()); 
EaseBounceInOut::create (move -»clone()); 


/ / 

弹性 缓冲 动作 

EaseElasticIn::create (move -»clone()); 
EaseElasticOut::create (move -»clone()); 
EaseElasticInOut::create (move -»5clone(), 0.3#); 


/ / 

回 震 缓冲 动作 

EaseBackIn::create (move ->с1опе()); 
EaseBackOut::create (move -»clone()); 
EaseBackInOut::create (move -»clone() ); 


第 一 个 参数 就 是 要 缓冲 的 动作 ， 其 中 基本 缓冲 动作 需要 第 二 个 参数 是 速率 ， 弹 性 缓冲 动作 第 二 个 参数 是 振动 的 周期 ， 默 认 值 为 0.3。 缓 冲动 作 的 示例 在 tests 项 目的 ActionsEaseTest 中 ， 部 分 运行 效果 见 
图 5-21 和 图 5-22。 


- EaseOut - Stop 


MainMenu 


图 5-21 基本 缓冲 动作 运行 示例 
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在 游戏 中 ， 我 们 的 游戏 对 象 有 时 不 是 执行 一 个 “动作 ”， 而 是 多 个 动作 的 动作 序列 ， 还 有 可 能 是 同时 执行 几 个 动作 序列 ， 这 时 候 就 需要 使 用 组 合 动作 的 方式 将 多 个 动作 或 按 序列 组 织 ， 或 合成 在 一 起 ， 


首先 介绍 Sequence 动 作 序 列 。 


定义 一 个 动作 序列 ， 可 以 使 用 动作 的 数组 ; 也 可 以 把 所 有 的 动作 作为 参数 传 和 create 函数 中 ， 最 后 结尾 参数 使 用 NULL ( 空 值 ) ; 也 可 以 把 两 个 有 限时 间 动 作 按 顺 序 传 和 create 函数 中 。Sequence 动 作 
序列 的 定义 与 使 用 如 代码 清单 5-16 所 示 。 


代码 清单 5-16 ” Sequence 动作 序列 的 定义 与 使 用 


auto seq2 = Sequence::create(action2, reverse2, NULL); 
 kathia-»setPosition (Point (s.width/2,50)); 


代码 的 第 一 句 采用 的 是 第 二 种 定义 方式 ， 使 用 的 方法 和 普通 的 动作 一 样 。 
Spawn 动 作 是 使 被 合成 的 动作 同时 进行 ， 它 的 定义 方法 和 动作 序列 一 致 ， 使 用 方法 见 代 码 清单 5-17。 


代码 清单 5-17 Spawn 动 作 的 定义 与 使 用 


void ActionSpawn: :onEnter () 
{ 
ActionsDemo::onEnter(); 
alignSpritesLeft (1); 


创建 动画 
auto action = Spawn::create( 
JumpBy::create(2, Point(300,0), 50, 4), 
RotateBy::create(2, 720), 
NULL); 


 grossini-»runAction (action); 


动作 Repeat 和 RepeatForever 都 可 以 使 动作 重复 进行 ， 不 同 之 处 就 是 Repeat 可 以 在 第 二 个 参数 中 定义 重复 次 数 ， 而 RepeatForever 是 一 直 重 复 的 。Repeat 的 使 用 见 代码 清单 5-18。 


代码 清单 5-18 ” Repeat 动作 的 定义 与 使 用 


auto rep2 = Repeat::create (ѕед->с1опе (), 10); 
_kathia->runAction (rep2); 


第 二 个 参数 是 重复 的 次 数 ， 取 值 范 围 为 1~2 30。RepeatForever 的 使 用 见 代 码 清单 5-19。 


代码 清单 5-19 ”RepeatForever 动 作 的 定义 与 使 用 


auto repl = RepeatForever::create (seq); 
m kathia-»runAction (repl); 


5.1.7 ”跟随 动作 


跟随 动作 Follow 是 一 个 节点 跟随 另外 一 个 节点 的 动作 ， 它 的 使 用 见 代 码 清单 5-20， 该 段 代 码 出 自 tests 项 目的 ActionTest.cpp 文 件 中 ActionFollow 类 的 onEnter 阔 数 。 


代码 清单 5-20 ”跟随 动作 Follow 的 使 用 


void ActionFollow: :onEnter () 


{ 


ActionsDemo::onEnter(); 


centerSprites (1); 
// 
获得 屏幕 尺寸 


auto s = Director::getInstance()-»getWinSize(); 


Bg 


设置 位 
_grossini->setPosition (Point (-200, s.height / 2)); 


auto move = MoveBy::create(2, Point(s.width * 3, 0)); 
auto move back = move-»reverse(); 

auto seq = Sequence::create (move, move back, NULL); 
auto rep = RepeatForever::create(seq); 


 grossini-»runAction (гер); 
this-»runAction(Follow::create( grossini, 
Rect(0, 0, s.width * 2 - 100, s.height))); 


re 


定义 它 的 第 一 个 参数 是 要 跟随 的 节点 ， 第 二 个 参数 是 运动 的 边界 ， 如 果 没 有 传 入 边界 ， 则 视 为 没有 边界 ， 运 行 效果 如 图 5-23 所 示 。 


Actions T est 
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95-23 ”跟随 动作 运行 效果 


可 调整 速度 动作 Speed 不 是 一 个 独立 的 动作 ， 可 以 把 它 理解 为 对 目前 动作 的 一 个 “包装 ”， 经 过 这 个 “包装 ”， 就 可 以 为 我 们 的 动作 设置 速度 了 ， 这 样 就 可 以 实现 “ 慢 动作 ”和 “ 快 进 ” 动 作 的 效果 。 
很 多 时 候 ， 我 们 做 特效 的 时 候 ， 为 了 配合 特效 ， 通 常 需要 做 这 样 的 处 理 ， 这 时 候 使 用 Speed 可 调 速度 动作 来 处 理 ， 就 很 方便 了 。 它 的 使 用 见 代 码 清单 ?5-21， 出 自 tests 项 目的 ActionEaseTest.cpp 文 件 中 
SpeedTest 类 的 onEnter 函 数 和 altertime 函 数 。 


void SpeedTest::onEnter () 


{ 


EaseSpriteDemo::onEnter (); 


// 
获得 屏幕 尺寸 


auto s = Director::getInstance()-»getWinSize(); 
// 
创建 动画 
auto jumpl = JumpBy::create(4, Point(-s.width*80, 0), 100, 4); 
auto jump2 = jumpl-»reverse(); 
auto rotl = RotateBy::create(4, 360*2); 
auto rot2 = rotl-»reverse(); 
// 
动作 序列 
auto seq3 1 = Sequence::create(jump2, jumpl, NULL); 
auto seq3 2 — Sequence::create(rotl, rot2, NULL); 
auto spawn = Spawn::create(seq3 1, seq3 2, NULL); 
auto action = Speed::create (RepeatForever::create(spawn), 1.0f); 


action-»setTag (kTagActionl); 


复制 动作 
auto action2 = action->clone () 
auto action3 = action->clone () 


// 
设置 动作 标签 

action2-»setTag (kTagActionl) 

action3-»setTag (kTagActionl) 


 grossini-»runAction (action2); 
 tamara-»runAction (action3); 
 kathia-»runAction (action); 


// 
运行 时 间 调 度 
this-»schedule (schedule selector (SpeedTest::altertime), 1.0f); } 


在 onEnter 国 数 中 ， 定 义 了 普通 动作 等 ， 并 使 用 schedule 使 得 在 每 1.0s 调 用 altertime 函 数 ， 在 altertime 卫 数 中 通过 getActionByTag 获 得 动作 ， 并 把 它们 视 作 Speed， 并 使 用 setSpeed 设 置 速 度 ， 设 置 
为 1 是 原 速 度 ， 大 于 1 速度 加 快 ， 小 于 1 速度 减 慢 。 运 行 效果 如 图 5-24 所 示 。 
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图 5-24 Speed 调整 播放 速度 示例 运行 效果 


动作 延 时 DelayTime 就 是 动作 延 后 一 段 固定 的 时 间 ， 你 可 以 把 它 理 解 为 一 个 “ 空 动作 ”， 只 有 了 时间， 没有 任何 动作 ， 它 的 使 用 见 代 码 清单 5-22 所 示 ， 该 段 代 码 出 自 tests 项 目的 ActionTest.cpp 文 件 中 
ActionDelayTime 类 的 onEnter 国 数 。 


void ActionDelayTime::onEnter() 


{ 


ActionsDemo::onEnter(); 
/ / 
左 对 齐 
alignSpritesLeft (1); 
创建 动作 


auto move = MoveBy::create(1, Point(150,0)); 
auto action = Sequence::create (move, DelayTime::create(2), 
move, NULL); 


 grossini-»runAction (action); 


一 般 要 放 入 Sequence 动 作 序列 中 才能 看 到 效果 ， 定 义 它 也 很 简单 ， 参 数 为 间隔 时 间 。 


TargetedAction 类 可 以 改变 动作 的 执行 对 象 ， 一 般 默 认 的 动作 执行 对 象 是 调用 runAction 的 对 象 。 有 时 候 需 要 自 定义 动作 执行 对 象 ， 这 时 需要 使 用 TargetedAction ， 它 的 使 用 见 代 码 清单 5-23， 该 段 代 
码 出 自 tests 项 目的 ActionTest.cpp 文 件 中 ActionTargeted 类 的 onEnter 函 数 。 


void ActionTargeted::onEnter () 


{ 


ActionsDemo::onEnter(); 
centerSprites (2); 


е, 
ыс 


创建 动作 
auto jumpl = JumpBy::create(2,Point::2Z2ERO,100,3); 
auto jump2 = jumpl-»clone(); 
auto rotl = RotateBy::create(1, 360); 
auto rot2 = rotl-»clone(); 
// 

创建 TargetedAction 
auto tl = TargetedAction::create( kathia, jump2); 
auto t2 = TargetedAction::create( kathia, rot2); 
// 

创建 动作 序列 
auto seq = Sequence::create(jumpl, tl, rotl, t2, NULL); 
/ / 

创建 循环 动画 
auto always = RepeatForever::create (seq); 
// 

运行 动画 


 tamara-»runAction (always); 


它 的 定义 使 用 create 函 数 ， 第 一 个 参数 是 执行 动作 的 节点 ， 第 二 个 参数 是 需要 执行 的 动作 ， 这 样 一 来 ， 虽 然 调 用 runAction 的 是 m_tamara， 但 是 执行 带 t1 和 t2 时 ， 执 行动 作 的 节点 变 为 m_kathia。 


5.1.11 RAEV 


有 时 候 某 些 动 作 完成 后 ， 你 需要 执行 一 些 数据 上 的 处 理 ， 比 如 游戏 中 攻击 敌人 ， 需 要 处 理 加 减 血 等 ， 这 时 需要 使 用 函数 回调 动作 CallFunc 等 ， 它 们 的 继承 关系 如 图 5-25 所 示 。 


CallFunc 


 CCCallFuncND . CCCallFuncO CallFuncN 


LuaCallFunc 


图 5-25 ”函数 回调 动作 继承 关系 


其 中 CallFunc 就 是 回调 国 数 ， 该 回调 的 国 数 不 含 参数 ，CallFuncND 的 回调 阔 数 以 Node 对 象 作为 参数 ，“N” 就 是 “Node” 的 意思 。CallFuncND 的 回调 国 数 以 Node 对 象 和 数据 作为 参数 ，“N ”就 
© "Node" 的 意思 ，“D” 就 是 “Data” 的 意思 ， 数 据 可 以 是 任何 类 型 的 ，CallFfuncO 是 Node 作 为 回调 函数 参数 的 ，“O” 就 是 “Object” 的 意思 。 使 用 示例 见 代码 清单 5-24 所 示 ， 出 自 tests 项 目的 
ActionTest.cpp 文 件 中 的 ActionSequence2 类 。 


代码 清单 5-24 ”函数 回调 动作 的 使 用 


void ActionSequence2::onEnter () 


{ 


ActionsDemo::onEnter(); 
// 
对 齐 精 灵 
alignSpritesLeft (1); 
精灵 设置 成 不 显示 


 grossini-»setVisible (false); 


// 
创建 动作 序列 
auto action = Sequence::create( 
Place::create (Point (200,200)), 
Show: :create(), 
MoveBy::create(1, Point(100,0)), 


А 


回调 函 
1Func: :create (СС CALLBACK 0(ActionSequence2::callbackl, this)), 


/ 

ЕЛ 
Cal 
// 

回调 函数 ， 在 回调 函数 中 传 入 精灵 对 象 

Ca] 
// 
zx 


lFunc: :create (CC CALLBACK O(ActionSequence2::callback2,this, grossini)), 


回调 函数 ， 在 回调 函数 中 传 入 精灵 对 象 和 数据 

CallFunc::create(CC CALLBACK O(ActionSequence2::callback3,this, grossini, 
Oxbebabepba)),NULL); 

ПА 
运行 动画 

 grossini-»runAction (action); 


} 


// 
什么 都 不 传 入 的 回调 函数 
void ActionSequence2::callbackl () 


auto s = Director::getInstance()-»getWinSize(); 


auto label = LabelTTF::create("callback 1 called", "Marker Felt", 16); 
label-»setPosition (Point (s.width/4*1,s.height/2)); 


// 
问 显示 层 中 传 入 标签 ， 显示 这 个 标签 
addChild (label); 


) 
// 
传 入 精灵 对 象 的 回调 函数 


void ActionSequence2::callback2 (Node* sender) 


{ 


auto s = Director::getInstance()-»getWinSize(); 


// 
创建 标签 
auto label = LabelTTF::create("callback 2 called", "Marker Felt", 16); 
label-»setPosition (Point (s.width/4*2,s.height/2)); 
addChild (label); 


} 
// 
传 入 精灵 对 象 和 数据 的 回调 函数 


void ActionSequence2::callback3 (Node* sender, long data) 
{ 


auto s = Director::getInstance()-»getWinSize(); 


// 
创建 标签 
auto label = LabelTTF::create("callback 3 called", "Marker Felt", 16); 
label-»setPosition (Point (s.width/4*3,s.height/2)); 
adaChild (label); 


可 以 看 到 CallFuncN、CallFuncO 和 CCCallFuncND 的 定义 ， 通 过 调用 CC_CALLBACK_O 获 得 回调 函数 所 属 的 类 和 回调 函数 句柄 ，CCCallFuncN 的 最 后 一 个 参数 就 是 数据 对 象 ， 底 下 分 别 是 三 个 函数 的 


定义 ， 运 行 效果 如 图 5-26 所 示 。 


ActionsTest 
Sequence of InstantActions 


A MainMenu 


图 5-26 回调 函数 动作 示例 运行 效果 


很 多 时 候 ， 我 们 在 进入 游戏 之 前 都 需要 做 载 入 动作 ， 这 时 需要 一 些 动作 来 实现 载 入 时 的 动画 ，Cocos2D-X 提 供 了 ProgressTo 和 ProgressFromTo 来 实现 这 个 动画 ， 但 是 执行 这 种 动作 的 节点 是 
ProgressTimer， 它 的 使 用 见 代 码 清单 5-25 所 示 ， 该 段 代 码 出 自 tests 项 目的 ActionsProgressTests.cpp 中 的 SpriteProgressToRadial 类 的 onEnter 函 数 。 


void SpriteProgressToRadial::onEnter () 


{ 


SpriteDemo::onEnter(); 


// 
ЭЕ А 


auto s = Director::getInstance()-»getWinSize(); 
// 
创建 动作 
auto tol = ProgressTo::create(2, 100); 
auto to2 - ProgressTo::create(2, 100); 
// 
创建 左 侧 ProgressTimer 
auto left = ProgressTimer::create(Sprite::create(s pathSisterl)); 
left-»setType (ProgressTimer::Type::RADIAL ); 
addchild (left); 
eft->setPosition (Point (100, s.height/2)); 
left->runAction (RepeatForever: :create (tol)); 
// 
创建 右 侧 ProgressTimer 
auto right = ProgressTimer::create(Sprite::create(s pathBlock)); 
right-»setType (ProgressTimer::Type::RADIAL); 
7 
旋转 方式 
right-»setReverseProgress (true); 
addChild (right); 
right-»5setPosition (Point (s.width-100, s.height/2)); 
// 
运行 动画 
right-»runAction (RepeatForever::create (to2)); 


首先 是 定义 ProgressTo 或 ProgressFromTo， 第 一 个 参数 都 是 动作 的 时 间 ，ProgressTo 的 第 二 个 参数 是 结束 时 图 片 显示 的 百分比 ，ProgressFromTo 的 第 二 个 参数 是 开始 时 图 片 显 示 的 百 分 
比 ，ProgressTo 第 三 个 参数 是 结束 时 图 片 显 示 的 百分比 。 接 下 来 是 定义 ProgressTimer， 传 入 精灵 对 象 来 定义 ， 通 过 调用 setType 国 数 来 设置 动画 的 类 型 。 


ProgressTimer:Type::RADIAL 是 圆 形 扫 拉 的 动画 ，ProgressTimer:Type::BAR 是 直线 扫描 的 动画 。 调 用 setReverseProgress 函 数 设置 正 反 的 方向 。ProgressTimer:Type::BAR 类 型 通过 
setBarChangeRate 设 置 水 平和 竖 直 的 变化 量 。 通 过 调用 setMidpoint 设 置 开 始点 ， (0,0) 为 左上 ， (1,11) 为 右 下 ， 其 他 点 可 以 用 浮 点 数 来 表示 。 圆 形 、 水 平和 坚 直 的 扫描 方向 的 运行 效果 如 图 5-27、 图 5- 
28 和 图 5- 29 所 示 。 
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图 5-27 BI i8 


ActionsProgress [est 


ProgressTo Horizontal 


MainMenu 


图 5-28 水平 扫描 
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Progress То Vertical 


MainMenu 
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52 ”动作 管理 类 


动作 管理 类 ActionManager 是 一 个 管理 所 有 动作 的 单 例 ， 它 的 工作 原理 是 : 当 Node 节 点 执行 runAction 时 ， 该 函数 会 把 动作 通过 动作 管理 类 的 addAction 函 数 将 对 象 传递 给 ActionManager 的 单 例 ， 
该 实例 再 把 这 个 动作 添加 到 自己 的 动作 序列 中 。 动 作 管理 单 例 通 定时 刷新 自己 的 update 方 法 ， 在 这 个 方法 中 去 调用 行为 序列 中 每 个 动作 的 step (暂停 的 行为 不 会 更 新 ) ， 这 些 step 方 法 再 根据 自身 的 完成 进 
度 去 更 新 或 是 结束 行为 。 实 际 上 ， 是 由 动作 管理 单 例 驱动 的 每 个 动作 去 更 新 自己 的 逻辑 ， 而 runAction 方 法 只 是 将 行为 对 象 添加 进 ActionManager 的 待 执行 队列 罢了 。 当 节点 被 清除 或 是 行为 结束 时 ， 动 作 
管理 会 自动 将 动作 从 队列 中 删除 ， 不 需要 程序 员 的 管理 。 一 般 情 况 下 ， 不 需要 使 用 这 个 单 例 来 管理 动作 ， 可 以 用 Node 节 点 类 的 stopAction、stopActionByTag 和 stopAllActions 等 函数 来 管理 。 但 是 有 两 种 
情况 需要 使 用 ActionManager 动 作 管理 类 单 例 ， 第 一 是 动作 的 执行 者 不 是 同一 个 节点 ， 第 二 个 是 需要 和 暂停 /重启 活动 时 ， 动 作 管 理 类 的 继承 关系 图 如 图 5-30 所 示 。 


ctionManager 


图 5-30 ”动作 管理 类 的 继承 关系 


5.21 动作 管理 类 的 主要 六 数 


ActionManager 类 的 主要 函数 见 表 5-5。 


表 5-5 ActionManaget 动 作 管理 类 的 主要 函数 


函数 名 iium jT A 


addAction 为 指定 目标 添加 动作 
removeAllActions 删除 所 有 动作 


为 指定 目标 删除 所 有 动作 

删除 传 入 的 动作 

根据 标签 删除 动作 

根据 标签 获得 动作 

获得 目标 的 动作 数 

暂 仿 目 标 动作 

暂停 所 有 动作 ， 返 回 被 暂 俘 动作 目标 的 集合 
重启 所 有 动作 ， 需 传人 被 暂停 动作 目标 的 集合 


removeAllActionsFromTarget 
removeAction 
removeActionByTag 
getActionByTag 
numberOfRunningA ctionsInTarget 
pauseTarget 


pauseAllRunningA ctions 


resumeTargets 


5.22 ”动作 管理 类 的 使 用 


之 前 提 到 过 ， 不 要 轻易 使 用 动作 管理 类 ， 除 非 是 不 同 动作 目标 和 需要 和 暂停 /重启 动作 。 这 里 的 例子 就 是 需要 和 暂停 /重启 动作 时 使 用 ， 如 代码 清单 5-26 所 示 ， 该 段 代码 出 自 tests 项 目的 
ActionManagerTests.cpp 中 的 ResumeTest 类 的 onEnter 函 数 。 


代码 清单 5-26 ”ActionManager 动 作 管理 类 的 使 用 


void ResumeTest::onEnter() 


rA 


ActionManagerTest::onEnter(); 
/ 


/ 
创建 标签 
auto 1 = LabelTTF::create("Grossini only rotate/scale in 3 seconds", 
"Thonburi", 16); 
addChild (1); 
l-»setPosition (Point (VisibleRect::center().x, 
VisibleRect::top().y - 75)); 
// 


auto pGrossini = Sprite::create(s pathGrossini); 
addChild(pGrossini, 0, kTagGrossini); 
pGrossini-»setPosition (VisibleRect::center()); 
// 


运行 动画 
pGrossini-»runAction (ScaleBy::create(2, 2)); 
auto director = Director::getInstance(); 


m. 
暂停 


director-»getActionManager () ->pauseTarget (pGrossini); 
// 


运行 动画 
pGrossini-»runAction (RotateBy::create(2, 360)); 
运行 时 间 调 度 
this->schedule (schedule selector (ResumeTest::resumeGrossini) 
SUE) 


} 


如 代码 所 示 ， 首 先 获得 导演 实例 ， 然 后 调用 getActionManager 获 得 动作 管理 ， 再 通过 pauseTarget 和 resumeTarget 等 函数 实现 暂停 /重启 目标 的 动作 。 


5.3 “Cocos2D-X 中 的 网 格 动作 


网 格 动作 类 似 于 特效 效果 ， 可 以 实现 翻转 、 抖 动 、 震 荡 、 水 波纹 等 效果 ， 它 基于 网 格 实现 ， 首 先 来 认识 网 格 。 


5.3.1 Cocos2D-X 中 的 网 格 


Cocos2D-X 中 的 网 格 类 的 基 类 GridBase， 它 有 两 个 子 类 Grid3D 和 TiledGrid3D， 这 两 个 类 的 区 别 就 是 网 格 的 每 个 子 块 都 可 以 分 离 出 来 ，GridBase 的 继承 关系 如 图 5-31 所 示 。 


GridBase 


TiledGrid3D 


图 5-31 网 格 类 的 继承 关系 图 


网 格 没有 什么 直接 应 用 的 场合 ， 只 要 明白 Grid3D 和 TiledGrid3D， 并 且 了 解 网 格 动作 是 基于 网 格 的 即 可 。 运 行 网 格 动作 的 节点 好 像 被 分 成 了 大 小 相同 的 很 多 和 矩形， 
这 些 矩 形 就 好 像 形成 了 一 个 和 矩阵。16x 12 大 小 的 网 格 将 会 运行 得 非常 快 ， 但 是 效果 一 般 。32x24 大 小 的 网 格 看 起 来 会 非常 棒 ， 但 是 在 有 些 时 候 运 行 起 来 不 会 太 快 。 


1547 


5.3.2 ”网 格 动作 


首先 需要 注意 的 是 ， 使 用 网 格 之 前 也 需要 取消 OpenGL 的 深度 检测 ， 调 用 如 下 代码 : 


Director: :getInstance ()->setDepthTest (true); 


然后 网 格 动 作 和 普通 动作 一 样 ， 可 以 使 用 runAction 来 运行 动作 ， 具 体 动作 的 介绍 如 表 5-6 所 示 。 


表 5-6 ”有 具体 动作 介绍 
№ 作 名 说 BH create Е 
ЕЗ 


Shaky3D 


sis Vu Ж C: |н РАН] T] 


过 这 些 矩 形 的 动作 形成 整体 动作 ， 


第 一 个 参数 是 扭曲 范围 ， 第 二 个 参数 是 是 否 扭曲 z 轴 ， 网 格 的 大 小 ， 


zu 作 名 说 ВВ create 函数 的 参数 
第 一 个 参数 是 波浪 数 ， 第 二 个 参数 是 振幅 ， 网 格 的 大 小 ， 第 四 个 参数 
ДЕ [Н] ҮЙ] ЇН] 
FlipX3D "TIS 
FlipY3D 时 间 
Lens3D 中 心 点 、 半 径 、 格 的 大 小 、 时 间 


Waves3D 波浪 式 


Ripple3D 中 心 点 、 半 径 、 波 浪 数 、 振 幅 、 格 的 大 小 、 时 间 

Liquid 流体 效果 波浪 数 、 振 幅 、 格 的 大 小 、 时 间 

Waves 波浪 数 、 振 幅 、 水 平 sin、 竖 直 sin、 格 的 大 小 、 时 间 

Twirl 中 心 点 、 扭 曲 数 、 振 幅 、 网 格 的 大 小 、 时 间 

ShakyTiles3D 学 围 、 是 否 z 轴 、 网 格 的 大 小 、 时 间 

ShatteredTiles3D ALI. Ae zd. PES. BR] 

ShuffleTiles 随机 数 种 子 、 网 格 的 大 小 、 时 间 

FadeOutTRTiles Wifi 网 格 的 大 小 、 时 间 

FadeOutBLTiles 网 格 的 大 小 、 时 间 

FadeOutUpTiles ај FR ili 网 格 的 大 小 、 时 间 

FadeOutDownTiles In] Fi 网 格 的 大 小 、 时 间 

TurnOffTiles 随机 数 种 子 、 网 格 的 大 小 、 时 间 

WavesTiles3D 方块 波浪 波浪 数 、 第 二 个 参数 是 振幅 、 网 格 的 大 小 、 第 四 个 参数 是 间隔 时 间 
JumpTiles3D 跳跃 次 数 、 第 二 个 参数 是 振幅 、 网 格 的 大 小 、 第 四 个 参数 是 间隔 时 间 


SplitRows 切 开 行 ЮЖ, ЇН] 
SplitCols: Br 4j PK ZA. ВЈ 
PageTurn3D 网 格 的 大 小 、 时 间 


部 分 运行 效果 图 见 图 5-32、 图 5-33 和 图 5-34。 
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5-34 ”Twidl 网 格 动作 


在 网 格 使 用 时 ， 网 格 动作 结束 后 需要 把 网 格 清空 ， 见 代码 清单 5-27。 


void TextLayer::checkAnim(float dt) 


{ 

“2 
判断 是 否 在 运行 网 格 特效 
if ( gridNodeTarget-»getNumberOfRunningActions() == 0 && 

 gridNodeTarget-»getGrid() != NULL) 

// 
KERT 


} 


_gridNodeTarget->setGrid (NULL) ;; 


这 段 代 码 首 先 获得 父 节点 ， 然 后 检测 父 节点 是 否 还 有 动作 ， 如 果 没 有 并 且 网 格 不 为 空 ， 则 调用 setGrid 传 参 NULL 便 可 清空 网 格 ， 使 用 schedule 一 直 检 测 调用 该 函数 就 可 以 实现 清空 无 动作 的 节点 网 格 。 


之 前 已 经 介绍 过 让 你 的 节点 动 起 来 的 一 些 方法 ， 在 Cocos2D-X 中 还 有 一 种 动作 ， 就 是 Animate 动 画 类 动画 。 要 实现 Animate 还 需要 定义 Animation 等 类 ， 我 们 来 看 关于 动画 的 这 些 类 。 


一 ^m х\/ д 上 
CA1 (Cnenc2n- YrH! 
2 4. CL( әс D -A HH. - 


首先 介绍 AnimationCache， 这 也 是 一 个 单 例 ， 用 于 缓存 所 有 的 动画 和 动画 帧 ， 它 的 使 用 见 代 码 清单 5-28。 


AnimationCacl 


auto cache = AnimationCache::getInstance(); 

// 

加 入 图 片 

cache-»addAnimationsWithFile ("animations/animations-2.plist"); 
/ / 

获得 动画 


auto animation2 = cache->getAnimation ("dance 1"); 


Hmm оде пѕќапсеёв 4а) АпітаїііопСасһе, 27) #8%аааАпітаійоп + ена, AEA, A НапігтпаіопВуМатева šA EA 
以 获得 相应 的 动画 。 


Animation 就 是 动画 ， 储 存 一 个 动画 动作 需要 的 所 有 帧 ， 可 以 通过 帧 的 数组 定义 ， 见 代码 清单 ?-29。 


代码 清单 5-29 _ Animation 动画 的 使 用 


// 
创建 动画 


auto animation = Animation::create(); 


Ll 
向 动画 中 添加 图 片 
for( int 1=1;1<15;1++) 


{ 


char szName[100] = {0}; 
sprintf (szName, "Images/grossini dance $02d.png", i); 
animation-»addSpriteFrameWithFile (szName); 


} 
жа 
设置 动画 间隔 


animation->setDelayPerUnit(2.8f / 14.0#); 
animation-»setRestoreOriginalFrame (true); 


// 
创建 动画 动作 

auto action = Animate::create (animation); 

// 
运行 动画 动作 
 grossini-»runAction (Sequence: create (action, 
action-»reverse(), NULL)); 


首先 定义 一 个 SpriteFrame 精 灵 帧 的 数组 ， 然 后 定义 一 个 Animation 动 画 ， 也 可 以 使 用 AnimationFrame 动 画 帧 来 定义 。 


Animate 动 画 动作 就 是 一 个 动作 类 ， 它 可 以 通过 Animation 动 画 来 定义 Animate 动 画 动作 ， 见 代码 清单 5-30。 


代码 清单 5-30 Animate 动 画 动作 的 使 用 


Sprite-»runAction (RepeatForever::create (Animate: :create (animation))) 


定义 Animate 动 画 动作 之 后 ， 将 它 作为 参数 传 入 runAction 中 就 可 以 执行 动画 ， 需 要 注意 的 是 执行 Animate 需 要 是 精灵 类 。 


5.4.2 Cocos2D-X 中 的 动画 实例 


Cocos2D-X 中 的 动画 使 用 实例 见 代 码 清 单 5-31， 该 段 代 码 出 自 tests 项 目 SpriteTest 项 目的 AnimationCache 类 的 构造 函数 中 。 


代码 清单 5-31 Cocos2D-X 中 的 动画 使 用 实例 


AnimationCacheTest::AnimationCacheTest () 


// 
XH UH 
auto frameCache = SpriteFrameCache::getInstance(); 
/ / 
加 入 图 片 
frameCache-» 
addSpriteFramesWithFile ("animations/grossini.plist"); 
frameCache-» 
addSpriteFramesWithFile ("animations/grossini gray.plist"); 
frameCache-» 
addSpriteFramesWithFile ("animations/grossini blue.plist"); 


// 
精灵 帧 数组 
Vector«SpriteFrame*» animFrames (15); 
char str[100] = (0); 
for(int i = 1; i < 15; i++) 


{ 


sprintf (str, "grossini dance $02d.png",i); 


auto frame = frameCache-»getSpriteFrameByName (str); 
Lf 
将 图 片 帧 传 入 数组 
animFrames.pushBack (frame); 
} 
a 
创建 动画 


auto animation = Animation::createWithSpriteFrames ( 


animFrames, 0.2#); 
/ / 
像 动画 缓存 中 加 入 动画 
AnimationCache::getInstance()-»addAnimation (animation, "dance"); 
// 
清除 
animFrames.clear(); 
/ / 
向 数组 中 传 入 另 一 种 图 片 
for(int і = 1; і 15; i++) 


{ 


sprintf (str, "grossini dance gray £02d.png",i); 


auto frame = frameCache-»getSpriteFrameByName (str); 
animFrames.pushBack (frame); 
} 
КА 
创建 动画 
animation = Animation::createWithSpriteFrames (animFrames, 0.2f); 
// 
将 动画 存 入 动画 缓存 
AnimationCache::getInstance ()-»addAnimation (animation, 


"dance gray"); 
/ 


清除 数组 
animFrames.clear(); 
/ / 
向 数组 中 传 入 另 一 种 图 片 
for(int i = 1; i < 4; i++) 


{ 


sprintf(str, "grossini blue $02d.png",i); 
auto frame = frameCache-»getSpriteFrameByName (str); 
animFrames.pushBack (frame); 


a 
创建 动画 
animation = Animation::createWithSpriteFrames (animFrames, 0.2f); 
// 
向 动画 缓 在 中 加 入 动画 
AnimationCache::getInstance ()-»addAnimation (animation, 


"dance blue"); 


// 
获得 动画 并 设置 
auto animCache = AnimationCache::getInstance(); 
uto normal = animCache-»getAnimation ("dance"); 
ormal-»setRestoreOriginalFrame (true); 
uto dance grey = animCache-»getAnimation ("dance gray"); 
ance grey-»setRestoreOriginalFrame (true); 
to dance blue = animCache-»getAnimation ("dance blue"); 
ance blue-»setRestoreOriginalFrame (true); i 
uto animN = Animate::create (normal); 
uto animG = Animate::create (dance grey); 
uto animB = Animate::create (dance blue); 


vaa IY 
G 


// 
动画 序列 


auto seq = Sequence::create(animN, animG, animB, NULL); 


auto grossini = Sprite::create(); 

auto frame = 
frameCache-»getSpriteFrameByName ("grossini dance 0l.png"); 
grossini-»setDisplayFrame (frame); 


// 

获得 屏幕 尺寸 
auto winSize = Director::getInstance()-»getWinSize(); 
grossini-»setPosition (Point (winSize.width/2, winSize.height/2)); 
addChild (grossini); 
// 


运行 动画 
grossini-»runAction (seq); 


e 


首先 分 别 定义 三 个 动画 ， 传 入 动画 缓存 中 ， 通 过 动画 缓存 获得 这 三 个 动画 ， 最 后 定义 动画 动作 并 执行 ， 运 行 效 果 如 图 5-35 所 示 。 


AnimationCache 


Sprite should be animated 


Мапмепи 


95-35 ”动画 实例 效果 


我 们 也 可 以 通过 plist 文 件 来 定义 动画 ， 如 代码 清单 5-32 所 示 。 


CCSpriteFrameCache *frameCache = CCSpriteFrameCache::sharedSpriteFrameCache (); 
frameCache-»addSpriteFramesWithFile ("animations/grossini.plist"); 
frameCache-^»addSpriteFramesWithFile ("animations/grossini gray.plist"); 
frameCache-»addSpriteFramesWithFile ("animations/grossini blue.plist"); 
CCAnimationCache::purgeSharedAnimationCache () ; 

CCAnimationCache *animCache = CCAnimationCache::sharedAnimationCache (); 


animCache-»addAnimationsWithFile ("animations/animations.plist"); 


可 以 看 到 ， 首 先 通过 贴图 集 plist 文 件 定义 SpriteFrameCache， 之 后 通过 动画 plist 文 件 定义 AnimationCache。 首 先 来 看 贴图 集 的 制作 方法 ， 贴 图 集 的 plist 文 件 见 代码 清单 5-33。 


<?xml version-"1.0" encoding-"UTF-8"?» 

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
"http://www.apple.com/DTDs/PropertyList-1.0.dtd"» 

<plist version-"1.0"» 

«dict» 
Xkey»texture«/key» 
«dict» 

Xkey»width«/key» 
«integer»512«/integer» 
Xkey»height«/key» 
«integer»256«/integer» 
«/dict» 
Xkey»frames«/key» 
«dict» 
Xkey»grossini dance 01.png</key> 
«dict» и и 
Xkey»x«/key» 
«integer»347«/integer» 
<key>y</key> 


«integer»1«/integer» 


Xkey»width«/key» 
«integer»51«/integer» 
Xkey»height«/key» 
«integer»109«/integer» 
Xkey»offsetX«/key» 
«real»0«/real» 
Xkey»offsetY«/key» 
«real»-1«/real» 
«key»originalWidth«/key» 
«integer»85«/integer» 
Xkey»originalHeight«/key» 
«integer»-121«/integer» 
«/dict» 
/ 
中 间 省 去 
«/dict» 
«/dict» 
«/dict» 
«/plist» 


可 以 看 到 ， 该 配置 文件 中 的 某 一 个 dict 元 素 就 是 一 张 图 片 的 定义 ， 包 括 在 贴图 集 的 位 置 和 宽 高 等 ， 由 于 目前 市 面 上 的 贴图 集 工 具 大 多 是 收费 的 ， 因 此 我 们 可 以 自己 实现 相应 的 贴图 集 工 具 ， 这 里 提供 大 
致 思路 。 


1) 界面 可 以 拖 动 图 片 到 贴图 集 整 张 图 的 位 置 。 
2) 可 以 加 入 自动 排列 所 有 图 片 的 功能 。 
3) 生成 相应 的 plist 文 件 。 


动画 plist 配 置 文件 是 以 贴图 集 等 为 基础 ， 标 明了 每 帧 使 用 的 图 片 等 信息 ， 如 代码 清单 5-34 所 示 。 
代码 清单 5-34 动画 plist 配 置 文件 


<?xml version-"1.0" encoding-"UTF-8"?» 

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
"http:// www.apple.com/DTDs/PropertyList-1.0.dtd"» 

<plist version-"1.0"» 

«dict» 
Xkey»animations«/key» 
«dict» 

Xkey»dance 1«/key» 
«dict i 
«key»delayc/key» 
«real»0.2«/real» 
Xkey»frames«/key» 
«array» 
«string»grossini dance 01.png«/string» 
«string»grossini dance 02.png«/string» 
«string»grossini dance 03.png«/string» 
«string»grossini ce 04.png«/string» 
«string»grossinji ce 05.png«/string» 
«string»grossini dance 06.png«/string» 
Xstring»grossini dance 07.png«/string» 
«string»grossini dance 08.png«/string» 
«string»grossini dance 09.png«/string» 
«string»grossini dance 10.png«/string» 
«string»grossini dance 11.png«/string» 
Xstring»grossini dance 12.png«/string» 

3 

4 


о, 
ИТ] 
5 


О. 
[0] 
5 


<string>grossini dance 13.png</string> 
<string>grossini dance 14.png</string> 
</array> 
</dict> 
</dict> 
«/dict» 
</plist> 


首先 Key 是 动画 名 ， 然 后 是 帧 的 延 时 ， 最 后 是 每 帧 所 使 用 的 图 片 。 这 是 一 个 简单 的 动画 所 需要 的 数据 ， 如 示例 所 示 AnimationCache 读 入 这 个 文件 后 就 会 从 spriteFrameCache 中 找到 相应 的 图 片 。 


Zwoptex 是 比较 流行 的 动画 制作 工具 ， 它 有 免费 的 Flash 版 本 和 收费 的 安装 版 。 


这 里 建议 利用 目前 掌握 的 一 些 技能 自己 编写 动画 编辑 器 ， 获 得 更 好 的 可 扩展 性 。 本 节 主 要 介绍 这 一 套 原理 ， 根 据 这 套 原 理 ， 使 用 Qt、C# 等 工具 也 可 以 开发 出 不 错 的 动画 编辑 器 和 贴图 集 编 辑 器 等 。 


5.4.4 ”Flash 动 画 的 转换 


有 很 多 页 游 开发 者 转 到 Cocos2D-X 进 行 手 游 的 开发 ， 把 Flash 动 画 转 成 Cocos2D-X 可 以 使 用 的 格式 有 两 个 方法 ， 下 面 分 别 介绍 。 


1. 使 用 TexturePacker 


一 个 是 使 用 TexturePacker 将 swf 文 件 转换 成 帧 序列 播放 ，TexturePacker 的 转换 十 分 智能 ， 可 以 将 相同 的 帧 合并 ， 对 节约 内 存 很 有 帮助 ， 要 让 你 的 TexturePacker 有 解析 swf 文 件 的 方法 ， 需 要 如 下 几 


首先 在 网 址 http://www.codeandweb.corytexturepackerflash-unpacker 上 下 载 解 析 swf 的 插件 。 然 后 就 可 以 选择 菜单 中 的 “preferences”， 最 后 将 “flash-unpacker” 的 路 径 设置 到 如 图 5-36 所 
示 的 位 置 即 可 。 


Flash Importer path 


Flash importer path | / Applications/FlashUnpacker.app Es 


Select the FlashUnpacker application to extract 
sprites from .swf files. Leave it empty if 
FlashUnpacker is installed in the same directory 
as TexturePacker. Read more: 

http: //www.codeandweb.com/texturepacker/fla 


Dialogs / Warnings 


| | Automatically close publish dialog 
. | Disable license period warning 


5-36 ”设置 插件 路 径 
在 此 之 后 ， 直 接 把 swf 文 件 拖 入 应 用 中 便 可 解析 了 。 


2. 使 用 骨骼 动画 


如 果 觉 得 前 一 种 方法 占用 内 存 比较 多 ， 可 以 使 用 骨骼 动画 。Cocos2D-X 支 持 Dragonbones 骨 骼 动画 ， 如 果 想 使 用 这 个 骨骼 动画 ，Flash 编 辑 器 必须 为 5.5 以 上 的 版 本 ， 然 后 在 


http://dragonbones.github.io/ 下 载 最 新 版 本 的 Dragonbones， 在 Flash 管 理 扩展 应 用 中 安装 Dragonbones 播 件 。 安 装 后 启动 ， 便 可 以 将 骨骼 动画 解析 成 Cocos2D-X 需 要 的 格式 了 ， 如 图 5-37 所 示 。 


XML 改制 动作 帮助 


“=: knight 


4 horseBody 


7 body 
> агтОшіѕіде 
> head 
г legOutside 
4 агтіпѕіде 


pu horseHead 


MAMINNI 


图 5-37  Dragonbones 5% 
单 击 导入 就 可 以 把 动画 导入 到 这 个 面板 中 ， 可 以 在 这 个 面板 观察 骨骼 的 结构 等 ， 单 击 导 出 按钮 ， 就 可 以 将 骨骼 动画 导出 成 我 们 需要 的 格式 了 ， 这 里 选择 XML 格式 。 


在 Cocos2D-X 中 的 使 用 见 代码 清单 5-35， 首 先是 异步 预 加 载 骨骼 动画 。 


代码 清单 5-35 ”异步 预 加 载 骨 骼 动画 


ArmatureDataManager: :getInstance ()->addArmatureFileInfoAsync 
("armature/knight.png", "armature/knight.plist" 
"armature/knight.xml", this, 
schedule selector (TestAsynchronousLoading: :dataLoaded)); 


, 


创建 骨骼 动画 见 代 码 清单 ?-36。 


代码 清单 5-36 创建 骨骼 动画 


Armature *armature = nullptr; 

armature = new Armature(); 

armature-»init ("Knight f/Knight"); 
armature-»getAnimation ()-»playWithIndex (0); 


— 


armature-»setPosition(50 + armatureCount * 2, 150); 
armature-»setScale (0.6f); 

addArmatureToParent (armature); 

armature-»release|(); 


CocoSstudio 也 可 以 创建 骨骼 动画 ， 关 于 CocoStudio 的 使 用 会 在 16 章 做 详细 介绍 。 


55 “本章 小 结 


本 章 介 绍 了 Cocos2D-X 中 的 动作 类 和 动画 等 ， 通 过 本 章 的 学 习 ， 可 以 让 之 前 定义 的 节点 和 精灵 等 动 起 来 。 其 中 5.1 节 Action 动 作 的 内 容 比较 多 ， 最 好 先 看 tests 示 例 再 使 用 ， 之 后 的 动作 管理 类 只 在 暂停 / 
重启 动作 和 不 同 的 目标 等 才 使 用 。 网 格 节点 内 容 也 很 多 ， 同 样 建议 先 看 tests 中 的 示例 ， 根 据 不 同 游戏 选择 不 同 的 使 用 方法 ， 最 后 一 节 介 绍 动画 ， 需 掌握 动画 的 制作 和 使 用 。 


下 一 章 介绍 游戏 中 Ul 部 分 使 用 的 菜单 项 和 文本 泻 染 等 。 


第 6 章 ”Cocos2D-X 中 的 菜单 项 和 文本 演 染 系统 


游戏 中 另外 一 个 重要 的 部 分 就 是 界面 ， 界 面 为 玩家 提供 信息 和 帮助 本 章 介绍 Menultem 菜 单项 和 它 的 子 类 需要 说 明 的 是 ， 菜 单 以 及 菜单 项 已 经 不 是 Cocos2D-X 推 荐 使 用 的 界面 控件 
了 ，Cocos2D-X 3.0 保 留 菜单 项 是 为 了 对 以 前 版 本 更 好 地 兼容 ， 本 书 介 绍 也 是 这 个 目的 ; 另外 本 章 介绍 Cocos2D-X 的 文本 泻 染 系统 ， 这 曾经 是 引擎 饱 受 诉 病 的 一 项 功能 ，3.0 版 本 也 对 这 部 分 进行 了 修改 。 


61 菜单 项 


菜单 项 Menultem 是 一 个 基 类 ， 它 的 子 类 可 以 加 入 Menu 中 形成 菜单 ， 首 先 来 看 Menultem 的 继承 关系 ， 如 图 6-1 所 示 。 


Ref 


Node 


Menultem 


" 
W 


MenultemLabel MenultemSprite | | MenultemToggle 


MenultemAtlasFont | | MenultemFont | |Menultemlmage 


图 6-1 Menultem 的 继承 关系 
6.1.1 标签 菜单 项 


使 用 字体 定义 的 菜单 项 包括 MenultemAtlasFont 和 MenultemFont， 这 是 定义 菜单 项 字体 的 两 种 方式 ， 也 是 标签 菜单 项 的 常用 项 。 其 中 MenultemFont 通 过 设 定 字体 名 称 来 设置 字体 ， 这 个 字体 是 系 
统 自 带 的 ， 使 用 方法 见 代码 清单 6-1。 


代码 清单 6-1 MenultemFont 的 使 用 


MenultemFont::setFontName ("Marker Felt"); 

MenuItemFont::setFontSize (28); 

auto item2 = MenuIltemFont::create("--- Go Back ---", [&] (Ref *sender)í 
static cast«LayerMultiplex*»( parent)-»switchTo (0); 

}); 


首先 设置 字体 和 字号 ， 支 持 Courier New, Marker Felt, American Typewriter 和 Arial 等 字体 。 创 建 按 钮 的 函数 有 两 个 参数 ， 第 一 个 参数 是 文字 内 容 ， 第 二 个 参数 是 传 入 回调 函数 ， 当 按 下 按钮 时 将 调 
用 这 个 回调 函数 。 


MenultemAtlasFont 是 通过 字体 配置 PNG 文 件 的 LabelAtlas， 或 者 是 FNT 文 件 的 LabelBMFont， 即 配置 文件 所 对 应 的 图 片 ， 用 法 见 代码 清单 6-2。 


代码 清单 6-2 MenultemAtlasFont 的 使 用 


auto label = LabelBMFont::create("Enable AtlasItem", 

"fonts/bitmapFontTest3.fnt"); 

auto iteml = MenuItemLabel::create(label, [&] (Ref *sender) { 
 disabledItem-»setEnabled(!  disabledItem-^isEnabled() ) 
 disabledItem-»stopAllActions (); 


r 


auto labelAtlas = LabelAtlas::create("0123456789", 

"fonts/labelatlas. png", T6, 24, "a"? 

auto item3 = MenuItemLabel::create(labelAtlas, 

CC CALLBACK 1 (MenuLayerMainMenu: :menuCallbackDisabled, this) ); 


PERAE- 1-3 UE Xr iBiRELabelAtlass&LabelBMFont, BONATE, Ваар ИЕ Л.Н, з ТЕНЕТА FREIE [TUS ERA, 
6.1.2 ”精灵 菜单 项 

精灵 菜单 项 MenultemsSprite 可 以 封装 图 片 进 入 菜单 项 ， 用 法 见 代码 清单 6-3。 
代码 清单 6-3 MenultemSprite 的 使 用 


auto spriteNormal = Sprite::create(s MenuItem, Rect(0,23*2,115,23)); 

auto spriteSelected = Sprite::create(s MenuItem, Rect(0,23*1,115,23)) 
auto spriteDisabled = Sprite::create(s Menultem, Rect(0,23*0,115,23) 

auto iteml = MenuItemSprite::create(spriteNormal, spriteSelected, 


spriteDisabled, CC CALLBACK 1 (MenuLayerMainMenu::menuCallback, this) ); 


首先 定义 精灵 类 对 象 ， 然 后 定义 Menultemsprite。 前 三 个 参数 是 普通 状态 下 的 按钮 、 选 中 状态 下 的 按钮 、 无 效 状 态 下 的 按钮 ;， JEPAT SU ЭШЕНИ тр АУ А26, ЕДЕТ TA EM NC 
择 器 。 


Menultemsprite 的 子 类 图 片 菜单 项 Menultemlmage 使 用 见 代码 清单 6-4。 


代码 清单 6-4 Menultemlmage 的 使 用 


auto item2 = MenuItemImage::create ("Images/btn-play-normal.png", 
'Images /btn-play-selected.png", 
CC CALLBACK 1 (MenuLayerMainMenu::menuCallback2, this) ); 


Menultemlmage 和 Menultemsprite 的 区 别 是 图 片 菜单 项 直接 以 图 片 的 路 径 定义 。 
6.1.3 ” 触 皮 器 菜单 项 


触发 器 菜单 项 MenultemToggle 可 以 将 任意 Menultem 传 进去 ， 作 为 一 个 触发 器 按钮 式 的 开关 ， 用 法 见 代码 清单 6-5。 


代码 清单 6-5 MenultemToggle 的 使 用 


auto iteml = MenuIltemToggle::createWithCallback ( 
CC CALLBACK 1(MenuLayer4::menuCallback, this), 
MenuItemFont::create("On" ), 
MenuItemFont::create ("Off"), 
NULL ); 


前 两 个 参数 是 执行 回调 函数 的 目标 类 和 回调 函数 的 名 称 传 入 选择 器 ， 后 面 可 以 传 入 菜单 项 ， 以 NULL 结 尾 ， 这 样 在 按 下 菜单 项 时 ， 除 了 调用 函数 ， 还 会 在 这 些 菜单 项 中 切换 ， 适 合 做 游戏 音乐 开关 等 。 
6.1.4. 菜单 项 的 使 用 


首先 需要 在 界面 中 创建 的 菜单 项 ， 也 就 是 界面 中 的 按钮 ， 然 后 把 这 些 菜 单项 加 入 菜单 对 象 中 ， 菜 单项 便 可 以 显示 出 来 了 ， 由 于 本 部 分 内 容 不 推荐 使 用 ， 所 以 示例 代码 就 出 自 tests 示 例 ， 见 代码 清单 6- 
6， 该 段 代 码 出 自 tests 项 目的 MenuTest.cpp 文 件 中 的 MenuLayer-MainMenu 类 的 构造 函数 。 


代码 清单 6-6 菜单 项 的 使 用 示例 


MenuLayerMainMenu: :MenuLayerMainMenu () 


auto menu = Menu::create(iteml1, item2, item3, item4, 
itemb,item7, item8, NULL); 
menu-»alignItemsVertically(); 

auto s = Director::getInstance()-»getWinSize(); 


int 1=0; 
// 
遍历 设置 染 单项 位 置 
for (const auto &child : menu-»getChildren()) { 
auto dstPoint = child-»getPosition(); 
int offset = (int) (s.width/2 + 50); 
if( 1$ 2 == 0) 
offset - -offset; 
child-»5setPosition(Point(dstPoint.x + offset, dstPoint.y) ); 
/ / 
菜单 项 出 现 动 画 
child-»runAction( 


EaseElasticOut::create (MoveBy: :create (2, 
Point(dstPoint.x - offset,0)), 0.35Ё));1++} 
 disabledItem = item3; item3-»retain(); 
 disabledItem-»setEnabled (false ); 

addchild (menu); 

menu-»setPosition (Point(s.width/2, s.height/2)); 


c. 


然后 处 理 菜单 项 的 初始 位 置 ， 为 它们 加 入 出 场 的 缓冲 动作 ， 并 将 第 三 个 菜单 项 设 为 不 可 用 ， 运 行 效果 如 图 6-2 所 示 。 


| toggle enable items 
СОРУ Сту 
Quit 
Remove menu item when moving 


GL verts: 426 Tali 
GL calls: 9 MainMenu 
353.7 / 0.008. 


图 6-2 ”菜单 项 使 用 示例 运行 效果 


在 游戏 中 ， 文 字 占有 很 重要 的 位 置 ， 例 如 游戏 介绍 、 游 戏 中 的 提示 和 对 话 等 都 需要 用 到 文字 。Cocos2D-X 在 文字 泻 染 方面 提供 了 非常 灵活 的 机 制 ， 既 可 以 直接 使 用 系统 字 ， 也 可 以 自演 染 字 体 。 从 2.0.1 
版 本 开始 ， 逐 渐 加 入 文字 描 边 、 文 字 阴影 等 功能 ， 这 些 功能 都 合并 到 3.0 版 本 中 ， 此 外 3.0 版 本 中 加 入 了 一 个 新 的 Label 类 ， 这 个 类 可 以 说 是 LabelBMFont 和 LabelTTF 的 合并 版 本 。 文 本 泻 染 类 的 继承 关系 如 
图 6-3 所 示 。 


LabelP rotocol 


LabelAtlas LabelBMFont LabelTTF 


TextFieldTTF 


UICCTextField 


图 6-3 ”文本 泻 染 类 的 继承 关系 


它们 都 继承 于 LableProtocol 协 议 ， 首 先 介 绍 LableAtlas。 


LableAtlas 是 使 用 图 片 作为 文字 的 一 种 方式 ， 可 以 通过 图 片 直接 定义 ， 见 代码 清单 6-7。 


auto labell = LabelAtlas::create("123 Test", 
"fonts/tuffy bold italic-charmap.png", 48, 64, ' '); 


其 中 第 一 个 参数 是 要 显示 文字 的 字符 串 ， 第 二 个 参数 是 图 片 路 径 ， 第 三 个 参数 是 字符 宽度 ， 第 四 个 参数 是 字符 高 度 ， 最 后 一 个 参数 是 起 始 字符 。 


LableAtlas 还 可 以 使 用 plist 配 置 文件 的 描述 来 定义 ， 见 代码 清单 6-8。 


代码 清单 6-8 定义 LableAtlas 类 


auto labell = LabelAtlas::create("123 Test", 
'fonts/tuffy bold italic-charmap.plist"); 


使 用 plist 文 件 同样 是 描述 代码 清单 6-7 中 定义 的 参数 ， 可 以 使 用 文本 编辑 器 修改 并 使 用 plist 文 件 。plist 文 件 的 例子 见 代 码 清单 6-9。 
代码 清单 6-9 plist 文 件 的 例子 


<?xml version-"1.0" encoding-"UTF-8"?» 

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
"http://www.apple.com/DTDs/PropertyList-1.0.dtd"» 
<plist version-"1.0"» 
«dict» 


key»versionc/key» 
integer»1«/integer» 
key»textureFilename«/key» 
string»fonts/tuffy bold italic-charmap.png«/string» 
key»itemHeight«/key» 
integer»64«/integer» 
key»itemWidth«/key» 
integer»48«/integer» 
key»firstChar«/key» 
«integer»32«/integer» 
«/dict» 
</plist> 


Jd 


人 和 人 和 AN 人 和 AN 人 AAA 和 A 人 和 人 人 和 人 


其 实 就 是 在 这 个 配置 文件 中 传递 同样 的 信息 ， 即 图 片 路 径 、 字 符 宽 度 、 字 符 
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使 用 这 种 字体 时 ， 可 以 定义 颜色 、 透 明度 等 参数 ， 甚 至 文字 标签 也 可 以 运行 动作 ， 见 代码 清单 6-10。 


代码 清单 6-10 ”字体 标签 的 使 用 


auto fade = FadeOut::create(1.0f); 

auto fade in = fade-»reverse(); 

auto cb = CallFunc::create(CC CALLBACK 0 
(LabelAtlasColorTest::actionFinishCallback, this)); 
auto seq - Sequence::create(fade, fade in, cb, NULL); 

auto repeat = RepeatForever::create (seq ); 
label2-»runAction (repeat ); 


当 字 体 需 要 “出 场 ”方式 或 者 “离开 ”方式 时 ， 运 行动 作 可 以 很 好 地 帮助 你 实现 这 个 功能 。 


6.2.2 LabelTTF 类 


LabelTTF 类 是 通过 系统 字 来 实现 字体 标签 的 ， 定 义 的 方式 见 代 码 清单 6-11。 


代码 清单 6-11 ”LabelTTF 类 的 定义 


auto ttf0 = LabelTTF::create("Alignment О\ппем line", "Helvetica", 12, 
Size(256, 32), TextHAlignment::LEFT); 


create 函 数 第 一 个 参数 是 标签 的 文字 内 容 ， 第 二 个 参数 是 字体 ， 第 三 个 参数 是 字号 ， 第 四 个 参数 是 范围 ， 第 五 个 参数 是 对 齐 方式 。 其 中 对 齐 方式 可 以 为 TextHAlignment::LEFT ( 左 对 齐 ) 、 
TextHAlignment::CENTER (中 心 对 齐 ) 和 TextHAlignment::RIGHT ( 右 对 齐 ) 等 。 可 以 通过 setAnchorPoint 设 置 整个 字符 串 的 锚 点 。 


Cocos2D-X 提 供 的 字体 见 表 6-1。 


表 6-1 Cocos2D-X 提 供 的 字体 


+ ж 名 字体 表现 


AppleGothic App leGoth IC 


HiraKakuProN-W6 HiraKakuProN-W6 
HiraKakuProN-W3 HiraKakuProN-W3 
MarkerFelt-Thin Marker Felt-Thin 
STHeitiK-Medium SIHeitiK-Medium 
STHeitiK-Light STHeitiK-Light 


TimesNewRomanPSMT TimesNewRomanPSMT 
( £x ) 
To 体 名 字体 表现 
Helvetica-Oblique Helve tica 一 Oblique 


Helvetica-BoldOblique Helvetica -BoldOb Па Ue 


Helvetica Helvetica 


Helvetica-Bold Helvetica-Bold 


TimesNewRomanPS-BoldMT TimesNewRomanPS-Bold MT 


TimesNewRomanPS-BoldItalicMT Ti mes Ne н’ R oman P AY = В (? Í d 1 Га [ [ CA 1 I 


TimesNewRomanPS-ItalicMT I! m ese TE R oman Р AT I Га [ IC ‚М I 


Verdana-Bold Ме га a n а 25 Bol d 


Verdana-BoldItalic Ve Г аа п d Ey B ol d I ta | '] с 


Verdana 


Verdana-Italic 


Georgia-Bold 


Georgia 


Georgia-Boldltalic 


Georgia-Italic 


ArialRoundedMTBold 


TrebuchetMS-Italic 


F Ж 名 


TrebuchetMS 


Trebuchet-BoldlItalic 


TrebuchetMS-Bold 


STHeitiTC-Light 


STHeitiTC-Medium 


GeezaPro-Bold 


GeezaPro 


Courier 


Courier-BoldOblique 


Verdana-Italic 


Georgia-Bold 


Georgia 
Georgia-BoldItalic 


Georgia-Italic 


ArialRoundedMT Bold 
TrebuchetMS-Italic 


字体 表现 


TrebuchetMS 


Trebuchet-Boldltalic 
TrebuchetMS-Bold 
STHeitiTC-Light 
sIHeitiTC-Medium 
GeezaPro-Bold 


GeezaPro 


Courier 


Courier-Boldoblique 


Courier-Oblique Cou ri er = Ob 1 1 ej UE 


Courier-Bold Courier-Bold 
ArialMT ArialM Т 

Arial-BoldMT Arial-BoldMT 
Arial-BoldltalicMT Arial-BoldltalicMT 
Arial-ItalicMT Arial-ItalicM T 


STHeitiJ-Medium STH IN -Med ILI ПП 
STHeitiJ-Light SI H = iti J z К . nt 


(Ж) 
т Ж 名 字体 表现 
ArialHebrew Аг 2 | H е р rew 
ArialHebrew-Bold Апа | H — Drew- Bold 


CourierNewPS-BoldMT Соцг1егМемР5 - Во1амт 


Thonburi Т 1 on D ur | 


Zapfino 


CourierNewPS-ItalicMT 


CourierNewPS-BoldItalicMT Co 11 ri 这 rNe wP © - Во 1 dI t Р | 1 1 СМТ 


CourierNewPSMT 
Thonburi-Bold Thonbyu ri - Bold 
AmericanTypewriter Am 已 ri (3 anlyp E Wri te Г 


AmericanTypewriter-Bold Атпе ric апТур ewr it er- Bo l d 


STHeitiSC-Medium STH (^ itis @ = Meci iu m 
STHeitiSC-Light STHeitiSC -Light 


HelveticaNeue H = Ivet | Ca М eue 


HelveticaNeue HelveticaNeue -Bold 


6.2.3 LabelBMFont 类 


LabelBMFont 类 也 是 文字 泻 染 标 签 类 ，LabelBMFont 类 中 的 每 个 字 都 是 一 个 精灵 类 ， 意 味 着 每 个 字 都 可 以 有 自己 的 旋转 动作 ， 并 且 它 支持 FNT 文 件 ， 首 先 来 看 LabelBMFont 的 定义 ， 见 代码 清单 6- 
12。 


代码 清单 6-12 ”LabelBMFont 的 定义 


auto labell = LabelBMFont::create("Test",  "fonts/bitmapFontTest2.fnt"); 
labell-»5setAnchorPoint (Point(0,0) ); 
addChild(labell1, 0, kTagBitmapAtlas1); 


auto fade = FadeOut::create(1.0f); 
auto fade іп = fade-»reverse(); 
auto seq - Sequence::create(fade, fade in, NULL); 


auto repeat = RepeatForever::create (seq); 
labell-»runAction (repeat); 


第 一 个 参数 是 要 显示 的 文字 ， 第 二 个 参数 是 FNT 文 件 ， 可 以 设置 锚 点 ， 也 可 以 运行 动作 。 获 得 单个 文字 并 为 单个 文字 运行 动作 见 代 码 清单 6-13。 


代码 清单 6-13 ”获得 单个 文字 


e 

获得 单个 文字 

auto BChar = (Sprite*) label-»getChildByTag (0); 

auto FChar = (Sprite*) label-»getChildByTag (7); 

auto AChar = (Sprite*) label-»getChildByTag (12); 

// 

添加 动画 

auto rotate = RotateBy::create(2, 360); 

auto rot 4ever = RepeatForever::create (rotate); 

// 

缩放 动画 

auto scale = ScaleBy::create(2, 1.5f); 

auto scale back = scale-»reverse(); 

auto scale seq = Sequence: :create (scale, scale back,NULL); 
auto scale 4ever = RepeatForever::create (scale seq); 
// 

跳跃 动画 

auto jump = JumpBy::create(0.5f, Point::ZERO, 60, 1); 
auto jump 4ever = RepeatForever::create (jump); 

IF 

淡出 淡 入 动画 


to fade out = FadeOut::create (1); 

to fade in = FadeIn::create (1); 

seq = Sequence::create(fade out, fade in, NULL); 
to fade 4ever = RepeatForever::create (seq); 


.g 099m 
кые е = 
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运行 动画 
BChar-»runAction(rot 4ever); 

BChar-»runAction (scale 4ever); 
FChar-»runAction (jump 4ever); 
AChar-»runAction(fade 4ever); 


生成 FNT 配 置 文件 的 工具 下 载 地 址 如 下 。 
.http:/ /www.n4te.com/hiero/hiero.jnlp (Java 平 侣 ) 
- http://slick.cokeandcode.com/demos/hieto.jnlp (Java 平 侣 ) 


- http://www.angelcode.com/products/bmfont/ (Windows 平 台 ) 


这 里 介绍 Windows 平 台 的 工具 Bitmap font generator， 下 载 安装 完成 后 界面 显示 如 图 6-4 所 示 。 


M Bitmap font generator 


Üptions Edit 


EB 


=z 


[= 000000 


Г 000100 


[ 000180 
[ 000250 
| 000250 
[ 000300 
[ 000370 


мо [ 000400 


А 


О 


y 


| 000590 
[ 000600 
| 001Е00 
[ оо2000 
| 002070 
[ 002040 
| 002100 
[ 002150 
| 002190 
[ 002200 
[ 002300 
[ 002500 
| 002580 
[ 002540 
[ 002600 
[ 0o0E800 
| 00Е000 


Г ппевпп 


Latin + Latin Supplement 
Latin Extended А 

Latin Extended B 

ІРА Extensions 

Spacing Modifier Letters 
Combining Diacritical Marks 
Greek and Coptic 

Cyrillic 

Hebrew 

Arabic 

Latin Extended Additional 
General Punctuation 
Subsceripts and Superscripts 
Currency Symbols 
Letterlike Symbols 

Humber Forms 

Arrows 

Mathematical Üperators 
Miscellaneous Iechnical 
Box Drawing 

Plock Elements 

geometric Shapes 
Miscellaneous Symbols 
Frivate Иче Área 


Frivats Use Área 


plnhahetiral Presentation F М 


zelected characters: 1T1/1419 


图 6-4 运行 界面 
选择 Options 一 Export Options， 弹 出 设置 选项 ， 如 图 6-5 所 示 。 


在 此 可 以 设置 贴图 大 小 等 ， 通 过 Options 一 Save bitmap font as 可 存储 相应 的 文件 ， 如 图 6-6 所 示 。 


Latin + Latin Supplement 


254 : FE 


在 Mac 下 可 以 使 用 GlyphDesigner 进 行 字 体 的 开发 ， 这 是 一 个 收费 工具 ， 下 载 地 址 为 http://glyphdesigner.71squared.com/help.php， 运 行 界面 如 图 6-7 所 示 。 


整体 操作 和 Bitmap font generator 类 似 ， 不 同 的 是 GlyphDesigner 的 可 选 字体 在 左边 的 栏 里 ， 选 择 loadFont 载 入 新 的 字体 ， 如 图 6-8 所 示 。 


单 击 preview 可 以 预览 ， 并 检测 字体 是 否 在 文件 中 ， 如 图 5-9 所 示 。 
下 方 的 输入 框 可 以 输入 需要 添加 的 文字 ， 如 图 6-10 所 示 。 


点 击 Save 和 Save As 按钮 可 以 导出 文件 。 


HM Bitmap font generator Export Options 4 = = | 


Layout 

Padding 回 Spacing ÀA- 
na „п [С 

- Texture .—— 

width: [256 Height [256 —— 

Ві дер: (9 8 C 32 

[^ Pack chars in multiple channels 


Latin + Latin Supplement 
000100 Latin Extended А 
000150 Latin Extended B 


ТРА Extensions 


Spacing Modifier Letters 
”000300 Combining Diacritical Markz 
000570 Greek and Coptic 

000400 Cyrillic 

000590 Hebrew 

000600 Arabic 
001E00 Latin Extended Additional = 


general Punctuation 


Chnl Value 


А: outline | Г 


002070 Subscripts and Superscripts 

О020А0 Currency Symbols 

002100 Letterlike Symbols 

002150 Humber Forms 

1002190 Arrows 

002200 Mathematical Dperators 

002300 Miscellaneous Technical 

002500 Вох Drawing 

002560 Block Elements 

002540 Geometric Shapes 

002600 Miscellaneous Symbols 

Private Use Area 

DOFO00 Private Use Area 
ППЕВПП Alnhahetiral Presentation F "V 

n Supplement 0 to " 


H 
G: 
B 


——  Fiefomat — 
Font descripto: ^ Теш C XML С Binary 


Textures: [png - Portable Network Graphic ”| 
Compression: [Deflate — 1 v] 


EN 


图 6-5 设置 界面 


selected characters: 171/1419 
置 选项 ， 如 图 5- 


EM Bitmap font generator 


= 000000 Latin + Latin Supplement 


回国 


а 酷 狗 音乐 交 件 夹 


AX PES OD: 
FH (т): — [Bitmap font (ж. fnt) 


selected characters: 154/1419 


图 6-6 ”生成 文件 
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图 6-7 GlyphDesigner 运 行 界面 
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图 6-8 ”选择 loadFont 载 入 新 的 字体 


Untitled 


Clear 480x320 :) ( Э Ghyph info 
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Height 


Apple Symbols 


Color 
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AppleGothic Auto Size 
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9610 ”添加 文字 


6.2.4 ” Label 标签 类 


Cocos2D-X 3.0 加 入 了 新 的 Label，Label 类 可 以 理解 为 对 于 LabelBMFont、LabelTTF 以 及 LableAtlas 的 整合 ， 定 义 LabelTTF 如 代码 清单 6-14 所 示 。 


代码 清单 6-14 ”定义 LabelTTF 


TTFConfig config("fonts/tahoma.ttf",16); 
auto ttf0 = Label::createWithTTF (config, Alignment О\ппем line", 
TextHAlignment::LEFT); 


一 


TTFConfig 的 第 一 个 参数 是 字体 ， 第 二 个 参数 是 字号 ， 这 样 设计 可 以 让 字体 更 好 地 被 复 用 ， 另 外 Label 中 的 TTF 字 体 FontFreeType 可 以 保证 在 不 同 平台 上 有 不 同 的 效果 ， 定 义 LabelBMFont 如 代码 清单 
6-15 所 示 。 


代码 清单 6-15 ”定义 LabelTTF 


auto labell = Label::createWithBMFont 
("fonts/bitmapFontTest2.fnt", "Test"); 


其 中 第 一 个 参数 是 字体 文件 路 径 ， 第 二 个 参数 是 需要 显示 的 字符 。 


还 可 以 根据 与 字符 串 对 应 的 图 片 创建 Label， 类 似 LableAtlas， 见 代码 清单 6-16。 


代码 清单 6-16 ”定义 LableAtlas 


auto label3 = Label::createWithCharMap 
("fonts/tuffy bold italic-charmap.png", 48, 64, ' '); 


可 以 给 定义 的 文字 加 上 阴影 的 效果 ， 见 代码 清单 6-17。 


代码 清单 6-17 设置 阴影 


auto offset = Size (slider->getPercent ()-50,50 - slider2->getPercent ()); 
shadowLabelTTF-»enableShadow (Color3B::BLACK,offset); 
shadowLabelBMFont-»enableShadow (Color3B::GREEN,offset); 


第 一 个 参数 是 颜色 ， 第 二 个 参数 是 距离 锚 点 的 偏 移 位 置 。 


还 可 以 设置 文字 的 发 光 和 描 边 效 果 ， 见 代码 清单 6-18。 


代码 清单 6-18 ”设置 文字 的 发 光 和 描 边 效果 


labell-»enableGlow (Color3B::YELLOW); 
label2-»enableOutline (Color4B::BLUE); 


效果 如 图 6-11 所 示 ， 上 面 的 是 发 光 ， 下 面 的 是 描 边 。 


图 6-11 发 光 和 描 边 效果 


6.2.5 ” FreeType 字体 库 


使 用 图 片 字 需 要 加 入 字体 纹理 ， 相 当 于 在 游戏 中 加 入 图 片 ， 出 于 缩减 游戏 资源 大 小 的 考虑 ， 在 一 般 项 目 中 ， 除 了 标题 都 使 用 “系统 字 ” 的 Label 类 来 处 理 文字 。 由 于 Android 系 统 的 版 本 较 多 ， 在 不 同 品 
牌 的 Android 系 统 手 机 上 ，“ 系 统 字 ”差别 较 大 。 为 了 统一 “系统 字 ” 带 来 的 困扰 ， 在 3.0 版 本 中 加 入 了 FreeType 字 体 库 。 


FreeType 库 是 一 个 开源 可 移植 的 字体 引擎 ， 它 提供 统一 的 接口 来 访问 多 种 字体 格式 文件 。FreeType2 是 FreeType 的 2.0 版 本 ， 支 持 iOS 和 Android 两 个 系统 ， 从 Cocos2D-X 2.0 时 ， 就 有 开发 者 采用 
FreeType2 使 字体 在 不 同 平台 上 有 相同 的 效果 ，3.0 版 本 中 把 FreeType 集 成 了 进来 。 


FreeType2 字 体 库 有 以 下 特点 。 

提供 统一 的 、 独 立 于 文字 类 型 的 接口 访问 不 同 字体 。 

- 生成 可 缩放 字体 类 型 。 

` FreeType2 的 设计 是 基于 模块 的 ， 这 些 模块 可 以 在 编译 时 被 静态 链接 到 库 中 或 者 在 运行 时 根据 需要 加 载 。 模 块 可 以 用 来 支持 特殊 的 字体 格式 ， 甚 至 是 新 的 符号 图 像 类 型 。 

. 通过 一 个 给 定 的 字形 轮 廊 ，FreeType2 产 生 一 个 高 质量 的 单 色 位 图 或 一 幅 使 用 年 256 阶 灰 度 的 不 走样 的 像素 图 。 

FreeType2 可 以 产生 一 些 相似 的 字体 引擎 无 法 产生 的 信息 ， 例 如 字 距 调整 的 位 距 、 字 符 名 、 重 直 度 量 之 类 的 。 模 块 化 设计 方便 通过 可 选 的 API 更 改 FreeType 库 来 提供 另外 的 针对 特定 字体 类 型 的 信息 。 


Cocos2D-X 中 使 用 FontFreeType 封 装 FreeType 库 ， 并 在 FontAtlas 和 它 的 缓存 类 中 使 用 它 ， 它 只 是 蔡 代 了 之 前 的 “系统 字 ”， 上 层 的 Labe| 类 中 并 没有 任何 变化 ，。 


6.26 ”语文 本 类 RichText 


在 实际 的 项 目 中 ， 有 时 文字 需要 变色 ， 有 时 文字 中 会 加 入 链接 或 者 按钮 ，Cocos2D-X 最 新 的 控件 中 加 入 了 富 文 本 类 RichText， 使 用 方法 见 代码 清单 6-19。 


代码 清单 6-19” 富 文本 类 RichText 的 使 用 


 richText = RichText::create(); 
 richText-»ignoreContentAdaptWithSize (false); 
richText-»setSize(Size(100, 100)); 


// 
富 文本 子 项 创建 ， 不 同 颜色 的 文字 
RichElemen -Text * те] RichElementText::create(1, Color3B::WHITE, 
255, "This color is white. ", "Helvetica", 10); 
ElementText* re2 = RichElementText::create(2, Color3B::YELLOW, 
255, "And this is yellow. ", "Helvetica", 10); 
RichElementText* re3 = RichElementText::create(3, Color3B::BLUE, 
2 
2 


55, "This one is blue. ", "Helvetica", 10); 
ElementText* re4 = RichElementText::create(4, Color3B::GREEN, 
55, "And green. ", "Helvetica", 10); 
RichElementText* re5 = RichElementText::create(5, Color3B::RED, 
255, "Last one is red ", "Helvetica", 10); 


RichElementlImage* reimg = RichElementlImage::create(6, Color3B::WHITE, 
255, "cocosui/sliderballnormal.png"); 


cocostudio::ArmatureDataManager: :getInstance()-»addArmatureFileInfo 
("cocosui/100/100.ExportJson"); 
cocostudio::Armature *рАг = cocostudio::Armature::create ("100"); 


pAr-»getAnimation ()-»play ("Animation1"); 


RichElementCustomNode* recustom = RichElementCustomNode::create 
(1, Color3B::WHITE, 255, pAr); 

RichElementText* re6 = RichElementText::create(7, Color3B::ORANGE, 
255, "Have fun!! ", "Helvetica", 10); 


将 这 些 项 目 顺序 放 入 富 文本 中 
richText-»pushBackElement (rel) 
richText-»insertElement (re2, 1); 
) 
) 


richText-»pushBackE] 


 richText-»pushBackE] 
 richText-»pushBackE] 
 richText-»insertElement (reimg, 2); 


‚зз 


richText-»pushBackElement (recustom); 

richText-»pushBackElement (re6); 

richText-»setPosition (Point (widgetSize.width / 2, 
widgetSize.height / 2)); 

 richText-»setZOrder (10); 

 widget-»addChild( richText); 


RichText 像 一 个 容器 ， 可 以 装 入 各 种 RichElement 子 类 ， 包 括 RichElementText 文 字 类 ，RichElementlmage 图 片 类 和 RichElementCustomNode 自 定义 节点 类 ， 可 以 通过 pushBackElement 将 元 素 加 
到 最 后 ， 也 可 以 调用 insertElement 插 到 某 个 部 分 ， 虽 然 支 持 的 元 素 还 不 够 ， 但 是 可 以 通过 继承 RichElement 类 添加 自己 需要 的 元 素 。 
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本 章 介绍 Cocos2D-X 中 的 UI 系统 ， 包 括 菜单 项 和 文本 泻 染 类 ， 学 习 本 章 之 后 ， 可 以 实现 自己 游戏 项 目 中 的 UI 模块 。 下 章 介绍 Cocos2D-X 中 的 事件 机 制 处 理 。 


Вга: ”Cocos2D-X 中 的 事件 处 理 机 制 和 UI 控件 


游戏 主要 是 玩家 和 程序 的 交流 ， 无 论 动画 做 得 多 么 生动 ， 特 效 做 得 如 何 绚丽 ， 游 戏 还 是 要 和 玩家 进行 互动 的 交流 。 在 智能 手机 中 ， 主 要 的 输入 操作 是 触摸 屏幕 、 重 力 感应 等 ， 而 输入 文字 主要 通过 虚拟 
键盘 等 。Cocos2D-X 3.0 对 触摸 机 制 做 了 修改 ， 比 如 加 入 了 根据 场景 中 z 轴 的 坐标 分 配 事件 优先 级 的 功能 。 本 章 介绍 Cocos2D-X 中 的 事件 处 理 机 制 ， 最 后 介绍 Cocos2D-X 3.0 新 添加 的 一 系列 UI 控 件 。 


对 于 目前 流行 的 卡 牌 游戏 以 及 策略 游戏 中 ，U| 一 直 占 据 举 足 轻重 的 位 置 ， 但 是 Cocos2D-X 的 UI 系统 一 直 是 大 家 吐槽 的 重 灾 区 ，3.0 版 本 不 仅 加 入 了 新 的 UI 控件 (如 富 文本 等 ) ， 而 且 对 之 前 常用 的 按钮 
等 做 了 重新 修改 ， 形 成 了 一 套 新 的 UI 控件 组 ， 本 章 的 后 半 段 介绍 Cocos2D-X 新 添加 的 UI 控件 。 


7.1 Cocos2D-X 中 的 事件 处 理 机 制 


Cocos2D-X 2.0 时 代 的 事件 处 理 机 制 以 布景 层 为 基础 ， 这 样 给 使 用 者 造成 了 一 些 困惑 ， 因 为 要 控制 一 个 节点 或 者 是 精灵 的 事件 时 ， 往 往 把 它 放 到 一 个 布景 层 中 才 可 以 ， 这 就 降低 了 灵活 性 。Cocos2D-X 
3.0 中 ， 不 仅 把 可 注册 事件 的 对 象 降 到 了 节点 ， 还 将 事件 分 离 出 来 ， 单 独 成 为 ，EventListener 类 及 其 子 类 关系 如 图 7-1 所 示 。 


Ref 


EventListener 


EventListener 


EventListener EventListener 


EventListenerCustom EventListenerKevboard EventListenerMouse 
ч T " y i : TouchAllAtOnce 


TouchOneByOne 


Acceleration 


图 7-1 EventListener 类 及 其 子 类 关系 
说 明 如 下 。 
: EventListenerKeyBoard: 键盘 处 理事 件 ; 
- EventListenerAcceleration: 加 速度 计 处 理事 件 监听 ; 


- EventListenerMouse: 和 鼠标 处 理事 件 监听 ; 


- EventListenerTouchAllAtOnce: 多 点 触摸 事件 监听 ; 
: EventListenerTouchOneByOne: 单 点 触摸 事件 监听 ; 
: EventListenerCustom: 自 定义 事件 监听 。 


事件 的 分 发 规则 实行 两 种 标准 ， 一 种 是 之 前 的 优先 级 方式 ， 另 一 种 是 通过 在 场景 中 z 轴 的 坐标 设置 优先 级 ， 越 是 在 上 层 的 节点 优先 级 越 高 。 使 用 setFixedPriority 函 数 设置 优先 级 ， 或 者 通过 调用 
setSceneGraphPriority 根 据 在 场景 中 的 z 轴 坐标 来 设置 相应 事件 的 优先 级 。 这 两 种 标准 同时 存在 的 时 候 ， 哪 个 优先 级 更 高 呢 ? 查看 代码 可 以 发 现 ，setSceneGraphPriority 函 数 中 调用 了 setFixedPriority， 
而 且 传 入 的 参数 为 0， 说 明 当 调用 setFixedPriority 时 ， 如 果 传 入 的 优先 级 是 正 数 ， 它 的 优先 级 是 不 如 设置 场景 深度 优先 级 调用 setSsceneGraphPriority 函 数 的 所 有 节点 的 ， 所 以 就 可 以 根据 需求 进行 设置 。 需 
要 注意 的 是 EventListenerTouchOneByOne 具 有 吞噬 事件 的 功能 ， 而 不 让 事件 继续 向 下 传 。 


7.2 ”Cocos2D-X 中 的 触 屏 事 件 


在 智能 手机 中 ， 触 屏 操 作 占 有 了 很 重要 的 位 置 ， 尤 其 多 点 触摸 技术 的 兴起 ， 使 得 触 屏 操作 在 游戏 中 更 广泛 使 用 ， 使 得 我 们 的 操作 方式 更 加 丰富 。Cocos2D-X 中 通过 EventListenerTouchAIIAtOnce 和 
EventListenerTouchOneByOne 分 别 作为 “ 单 点 触摸 ”和 “多 点 触摸 ”事件 的 监听 ， 相 比 1.0 和 2.0 时 代 的 基于 布景 层 Layer 类 的 代理 方式 ， 这 种 添加 监听 的 方式 更 加 灵活 ， 保 留 了 设置 优先 级 的 方式 ， 并 且 加 
入 了 根据 节点 在 屏幕 中 的 z 轴 位 置 来 分 配 相应 优先 级 ， 更 加 清晰 易 用 。 


7.2.1 和 触 点 类 Touch 


一 般 把 触摸 点 的 信息 放 入 Touch 类 中 ，Touch 类 的 公共 函数 如 表 7-1 所 示 。 


表 7-1 Touch 类 的 公共 函数 
РЁ Zl 名 yx [5] ET FIJ ^ zm 


getLocation 获得 点 在 画布 中 的 位 置 (使 用 OpenGL 坐标 系 ) 


之 前 在 画布 中 的 位 置 (使 用 OpenGL 坐标 系 ) 
医 得 计算 坐标 的 起 始 位 置 (使 用 OpenGL 坐标 系 ) 


getPreviousLocation 


getStartLocation 


getDelta 坐标 点 医 得 当前 坐标 点 和 前 一 个 坐标 点 之 间 的 坐标 差 
getLocationInView 获得 点 在 画布 中 的 位 置 (使 用 屏 硕 坐标 系 ) 
getPreviousLocationInView 坐标 点 之 前 在 画布 中 的 位 置 (使 用 屏幕 坐标 系 ) 
getStartLocationInView 多 得 计算 坐标 的 起 始 位 置 CREE BEA B Ж) 
setTouchInfo 25 设置 信息 ， 三 个 参数 为 ID 5, X 坐标，y 坐标 
getID 整 型 获得 ID 号 


Touch 类 将 触 点 类 的 信息 封装 进 Touch 类 中 ， 作 为 在 函数 中 传递 的 参数 ， 在 回调 函数 中 ，2.0 版 本 通过 一 系列 操作 获得 我 们 需要 的 坐标 值 ， 见 代码 清单 7-1。 


代码 清单 7-1 ”2.0 版 本 如 何 获得 坐标 值 


CCPoint point = touch-»locationInView(); 
point = CCDirector::sharedDirector ()-»convertTOoGL (point); 


首先 通过 locationlnView 获 得 坐标 点 ， 这 个 坐标 点 是 屏幕 坐标 系 的 ， 而 编写 逻辑 时 ， 一 般 对 应 的 其 他 坐标 都 是 在 OpenGL 坐 标 系 中 ， 所 以 需要 再 做 一 次 转换 。3.0 版 本 把 这 段 常 用 的 代码 整合 到 Touch 类 
中 ， 可 以 通过 调用 getLocation 直 接 获得 OpenGL 坐 标 系 中 的 值 。 


7.2.2 单 点 触摸 函数 


Cocos2D-X 中 的 单 点 触摸 函数 见 表 7-2。 
表 7-2 Cocos2D-X 中 的 单 点 触摸 函数 
函数 名 ^ @ 
解 挠 开始， 返回 true nf DEIZ fb Po s TER C] BEBO AR, 
ZR TZ Ebo d РА AGIS] IH. IRL] Hf S] @ 


点 的 变化 只 


onTouchBegan 布尔 型 


onTouchMoved fh dot i E 5) 
onTouchEnded fh zJ EZ 


536 p pg X ЖЕҢИ ТЫ ph o ВЕУ ZU] АН РА, АУ РЕ Е EA oz HH 
HE [8] ЖАН Ци Foz eV er ЗВЧ Л s ER TE ERIR Г 


onTouchCancelled 


这 里 的 四 个 遂 数 不 再 是 需要 继承 并 重 写 的 虚 遂 数 ， 而 是 需要 为 监听 器 注册 的 四 个 事件 ， 需 要 说 明 的 是 onTouchBegan 和 onTouchCancelled,。 бо ou 事件 处 理 类 将 触摸 点 分 发 给 各 
个 接收 的 函数 中 ， 使 用 onTouchBegan 并 在 返回 时 返回 true， 可 以 让 这 个 触 点 属于 这 个 函数 的 所 属 对 象 ， 并 且 其 他 对 象 不 再 接收 该 触 点 ， 这 样 之 后 再 获得 的 触摸 点 肯定 是 它 自 己 的 。 这 样 减轻 了 对 多 点 触 控 
时 的 判断 。 


关于 onTouchCancelled， 有 很 多 人 认为 手指 移出 屏幕 或 者 目标 对 象 的 范围 就 会 触发 onTouchCancelled， 但 事实 上 ， 这 种 情况 下 调用 的 依然 是 onTouchEnded 函 数 。 事 实 上 ， 系 统 中 断 通 知 需要 取消 
触摸 事件 的 时 候 会 调用 onTouchCancelled， 这 个 中 断 往往 是 因为 应 用 长 时 间 没 有 响应 或 者 当前 视图 从 系统 的 顶层 上 移 除了 ， 通 常 有 如 下 几 种 情况 。 


- 应 用 长 时 间 没 有 响应 或 者 当前 视图 从 系统 的 顶层 上 移 除 。 
: 程序 进入 后 台 时 ， 有 可 能 是 来 电 中 断 、 电 量 低 中 断 和 部 分 机 型 上 的 Home 键 被 按 下 。 
- 屏幕 关闭 和 触摸 的 时 候 ， 某 种 原因 导致 距离 传感器 工作 ， 例 如 脸 靠近 


部 分 触摸 权限 覆盖 了 本 应 用 的 触摸 权限 等 。 


7.2.3 ”多 点 触摸 国 数 


Cocos2D-X 中 的 多 点 触摸 函数 ， 通 过 EventListenerTouchOneByOne 注 册 事 件 监 听 ， 需 要 注册 的 函数 见 表 7-3。 


表 7-3 Cocos2D-X 中 的 多 点 触摸 函数 


РА E: 返回 类 型 п A 


onTouchesBegan 2s fh Po АП 

onTouchesMoved 25 fh dos ы, ZA] 

onTouchesEnded 2 AEREE R 

onTouchesCancelled 2 系统 中 断 通 知 需要 取消 触 挠 事件 的 时 


个 函数 的 分 工 和 单 点 触摸 是 一 样 的 ， 唯 一 不 同 的 是 它们 传 入 的 是 一 个 点 集 ， 而 不 是 一 个 点 。 


7.24 加 入 单 点 触摸 


单 点 触摸 的 使 用 见 代 码 清单 7-2， 该 段 代 码 出 自 tests 项 目 中 PerformanceTest 文 件 夹 中 的 PerformancetouchesTest.cpp 文 件 中 的 TouchesPerformTest1。 


代码 清单 7-2 加 入 单 点 触摸 


void TouchesPerformTest1::onEnter() 


{ 


TouchesMainScene::onEnter(); 
setTouchEnabled (true); 


std::string TouchesPerformTestl::title() 


return "Targeted touches"; 


void TouchesPerformTest1::registerWithTouchDispatcher () 


{ 


CCDirector* pDirector = CCDirector::sharedDirector(); 
pDirector-»getTouchDispatcher () -^addTargetedDelegate (this, 0, 
true); 
} 
bool TouchesPerformTestl::ccTouchBegan(CCTouch* touch, CCEvent* event) 


{ 


numberOfTouchesB++; 
return true; 


void TouchesPerformTesti1::ccTouchMoved (CCTouch* touch, CCEvent* event) 
{ 
numberOfTouchesM++; 


void TouchesPerformTest1: :ccTouchEnded (CCTouch* touch, CCEvent* event) 


{ 
} 
void TouchesPerformTestl::ccTouchCancelled(CCTouch* touch, CCEvent* event) 


{ 
} 


numberOfTouchesE--t; 


numberOfTouchesC-*; 


根据 需要 的 逻辑 编写 ccTouchBegan、ccTouchMoved、ccTouchEnded 和 ccTouchCancelled 等 函数 ， 见 代码 清单 7-3。 该 段 代 码 出 自 tests 项 目 中 TouchesTest 文 件 夹 中 的 Paddle.h 文 件 中 的 Paddle 


代码 清单 7-3” 非 布景 层 类 和 非 布 景 层 类 的 子 类 使 用 触摸 


class Paddle : public Sprite, public Clonable 


PaddleState State; 
public: 

Paddle (void); 

virtual -Paddle (void); 

Rect getRect (); 

bool initWithTexture (Texture2D* aTexture); 

virtual void onEnter() override; 

virtual void onExit() override; 

bool containsTouchLocation(Touch* touch); 

bool onTouchBegan(Touch* touch, Event* event); 

void onTouchMoved(Touch* touch, Event* event); 

void onTouchEnded(Touch* touch, Event* event); 

virtual Paddle* clone() const; 

static Paddle* createWithTexture (Texture2D* aTexture); 


}; 


与 Layer 布 景 层 不 同 的 是 ， 需 要 onEnter 和 onExit 中 注册 /注销 触摸 的 代理 ， 见 代码 清单 7-4。 该 段 代 码 出 自 tests 项 目 中 TouchesTest 文 件 夹 中 的 Paddle.cpp 文 件 中 的 Paddle 类 。 


代码 清单 7-4 ”注册 /注销 触摸 的 代理 


void Paddle::onEnter() 


{ 


Sprite::onEnter(); 
auto listener = EventListenerTouchOneByOne::create(); 
listener-»setSwallowTouches (true); 


listener-»onTouchBegan = CC CALLBACK 2(Paddle::onTouchBegan, this) 
listener-»onTouchMoved = CC CALLBACK 2(Paddle::onTouchMoved, this) 
listener-»onTouchEnded = CC CALLBACK 2 (Paddle::onTouchEnded, this) 
eventDispatcher-»addEventListenerWithSceneGraphPriority( 


listener, this); 


void Paddle::onExit() 


{ 


 eventDispatcher-»removeAllEventListeners(); 
Sprite::onExit(); 


7.2.5 “加 入 多 点 触摸 
多 点 触摸 的 使 用 见 代 码 清单 7-5， 该 段 代 码 出 自 tests 项 目 中 PerformanceTest 文 件 夹 中 的 PerformancetouchesTest.cpp 文 件 中 的 TouchesPerformTest2。 


代码 清单 7-5 多 点 触摸 的 使 用 


void TouchesPerformTest2::onEnter() 


{ 


TouchesMainScene::onEnter(); 

auto listener - EventListenerTouchAllAtOnce::create(); 

listener-»onTouchesBegan = CC CALLBACK 2(TouchesPerformTest2::onTouchesBegan, this); 
listener-»onTouchesMoved - 
CC CALLBACK 2 (TouchesPerformTest2::onTouchesMoved, this); 
listener-»onTouchesEnded - 
CC CALLBACK 2(TouchesPerformTest2::onTouchesEnded, this); 
listener-»onTouchesCancelled = 
CC CALLBACK 2 (TouchesPerformTest2::onTouchesCancelled, this); 
 eventDispatcher-» 
addEventListenerWithSceneGraphPriority(listener, this); 


std::string TouchesPerformTest2::title() const 


{ 
} 


void TouchesPerformIest2::onTouchesBegan 
(const std::vector«Touch*»& touches, Event* event) 


return "Standard touches"; 


{ 


numberOfTouchesB += touches.size(); 


void TouchesPerformTest2::onTouchesMoved 
(const std::vector«Touch*»& touches, Event* event) 
{ 


} 
void TouchesPerformTest2::onTouchesEnded 
(const std::vector«Touch*»& touches, Event* event) 


numberOfTouchesM += touches.size(); 


{ 


numberOfTouchesE += touches.size(); 


void TouchesPerformTest2::onTouchesCancelled 
(const std::vector«Touch*»& touches, Event* event) 


{ 
} 


numberOfTouchesC += touches.size(); 


步骤 及 过 程 和 单 点 触摸 类 似 ， 只 是 Touch 类 需要 从 vector 里 获得 ， 见 代码 清单 7-6， 该 段 代码 出 自 tests 项 目 中 MutiTouchTest 文 件 夹 中 的 MutiTouchTest.cpp 文 件 中 的 MutiTouchTestLayer 类 中 的 
ccTouchesBegan ži. 


代码 清单 7-6 ”从 vector 里 获得 触 点 类 


void MutiTouchTestLayer: :onTouchesBegan (const std::vector<Touch*>& touches, Event  *event) 


{ 


for ( auto &item: touches ) 


{ 


auto touch = item; 

auto touchPoint = TouchPoint::touchPointWithParent (this); 
auto location = touch-»getLlocation(); 
touchPoint-»setTouchPos (location); 
touchPoint-»setTouchColor (*s TouchColors [touch-»getID()]) ; 
addChild (touchPoint); 

s map.insert(touch-»getID(), touchFPoint); 


( 


} 


void MutiTouchTestLayer::onTouchesMoved 
(const std::vector«Touch*»& touches, Event  *event) 
{ 


for( auto &item: touches) 


{ 


auto touch = item; 

auto pTP = s map.at(touch-»getID()); 
auto location = touch-»getLlocation(); 
pTP-»setTouchPos (location); 


} 


void MutiTouchTestLayer: :onTouchesEnded 
(const std::vector<Touch*>& touches, Event  *event) 


{ 


for ( auto &item: touches ) 


{ 


auto touch = item; 

auto pTP = s map.at (touch-»getID()); 
removeChild(pTP, true); 

s map.erase (touch-»getID()); 


} 


void MutiTouchTestLayer::onTouchesCancelled 
(const std::vector«Touch*»& touches, Event  *event) 


{ 
} 


onTouchesEnded (touches, event); 


r 


— 


如 代码 所 示 ， 通 过 获得 一 个 迭代 器 遍历 整个 数组 即 可 获得 所 有 的 触 点 。 
7.2.6 实战: 主角 随手 指 移动 


很 多 触 屏 游戏 中 ， 控 制 主角 的 方法 就 是 让 主角 随手 指 移动 。 本 节 就 来 做 一 个 主角 随 主 角 移 动 的 示例 ， 如 代码 清单 7-7 所 示 ， 首 先 在 布景 层 的 init 函 数 中 新 建 主角 和 加 入 触 屏 检测 等 。 


代码 清单 7-7 修改 初始 化 函数 


bool HelloWorld::init() 
{ 


f ( !Layer::init() ) 


5. pis 


return false; 

} 

Size visibleSize = Director::getInstance()-»getVisibleSize(); 

Point origin = Director::getInstance()-»getVisibleOrigin(); 

auto closeItem = MenuItemImage::create( 
"CloseNormal.png", 
"CloseSelected.png", 

CC CALLBACK 1 (HelloWorld::menuCloseCallback, this)); 

© closeItem-»setPosition(Point(origin.x + visibleSize.width 


closeltem-»getContentSize().width/2 , 
origin.y + 
closeltem-»getContentSize ().height/2)); 
auto menu = Menu::create(closeltem, NULL); 
menu-»setPosition (Point::ZERO); 
this-»addChild (menu, 1); 
auto label = LabelTTF::create("Hello World", "Arial", 24); 
label-»setPosition(Point(origin.x + visibleSize.width/2, 
origin.y + visibleSize.height 


label-»getContentSize().height)); 

this-»addChild (label, 1); 

auto sprite = Sprite::create("HelloWorld.png"); 

sprite-»setPosition (Point (visibleSize.width/2 + origin.x, 
visibleSize.height/2 + origin.y)); 

this-»addChild(sprite, 0); 

hero = Sprite::create("grossini.png"); 

hero-»setPosition( Point (visibleSize.width/2, 
visibleSize.height/2) ); 

this-»addChild (hero, 0); 

auto touchListener = EventListenerTouchOneByOne::create(); 

 touchListener-»setSwallowTouches (false); 

. touchListener-»onTouchBegan = 

CC CALLBACK 2(HelloWorld::touchBegan, this); 

touchListener-»onTouchMoved = 

CC CALLBACK 2(HelloWorld::touchMoved, this); 

touchListener-»onTouchEnded - 

CC CALLBACK 2(HelloWorld::touchEnded, this); 

touchListener-»onTouchCancelled = 
CC CALLBACK 2(HelloWorld::touchEnded, this); 

 eventDispatcher- > 
addEventListenerWithFixedPriority( touchListener, -129); 

return true; = 


在 初始 化 函数 注册 触摸 监听 后 ， 需 要 在 对 应 回调 中 写 相 应 的 逻辑 ， 如 代码 清单 7-8 所 示 。 


代码 清单 7-8 ” 重 写 触摸 的 函数 


bool HelloWorld::touchBegan(Touch* touch, Event* event) 
{ 
Point heropos = hero-»getFPosition(); 
Point location = touch-»getLlocation(); 
if(location.x > heropos.x - 42.5 && location.x « heropos.x + 42.5 && 
location.y > heropos.y - 60.5 && location.y « heropos.y + 60.5){ 
isControl - true; 
deltax = location.x - heropos.x; 
deltay = location.y - heropos.y; 


} 


return true; 


void HelloWorld::touchMoved(Touch* touch, Event* event) 


{ 


if (isControl)( 


Point location = touch-»getLlocation(); 
Float x = location.x - deltax; 
Float y = location.y - deltay; 


hero-»setPosition (Point (x,y)); 


} 


void HelloWorld::touchEnded(Touch* touch, Event* event) 


{ 


isControl = false; 


void HelloWorld::touchCancelled(Touch* touch,Event* event) 


{ 
} 


isControl = false; 


Gem D Min in 主角 图 片 矩形 的 范围 内 ， 若 在 学 围 内 ， 将 布尔 型 的 全 局 变量 设置 为 true， 并 且 计 算 触摸 点 的 横 纵 坐 标 与 主角 锚 点 坐标 的 差 值 ， 因 为 要 让 主角 移动 要 修改 锚 
点 位 置 ， 必 须知 道 锚 点 位 置 与 触摸 位 置 的 偏 移 量 ， 之 后 就 可 以 通过 这 个 仿 移 量 设置 主 角 的 位 置 。 


在 touchMoved 中 ， 若 初始 的 布尔 型 全 局 变量 为 true， 说 明 在 touchBegan 中 ， 触 点 已 经 控制 主角 ， 后 面 可 以 根据 之 前 计算 好 的 触摸 点 的 横 纵 坐标 与 主角 锚 点 坐标 的 差 值 来 计算 主角 的 锁 点 位 置 ， 并 设 
置 主角 位 置 。touchEnded 和 touchCancelled 中 ， 将 布尔 型 全 局 变量 设置 为 false 即 可 。 运 行 效 果 如 图 7-2 所 示 。 


图 7-2 主角 随手 指 移动 运行 效果 


7.2.7 ”实战 : 缩放 
整体 缩放 在 游戏 中 经 常 使 用 ， 使 用 两 点 触摸 的 方法 ， 当 两 个 手指 靠近 时 整体 缩小 ， 当 两 个 手指 远离 时 整体 放大 ， 依 然 需要 在 初始 化 函数 中 加 入 监听 器 的 创建 和 注册 ， 见 代码 清单 7-9。 


代码 清单 7-9 ” 重 写 触摸 函数 


void HelloWorld: :touchesBegan (const std::vector«Touch*»& touches, Event  *event) 


{ 


if(touches.size() >= 2){ 

Point mPoint1 = touches.at(0)-»getLocation(); 

Point mPoint2 = touches.at(1)-»getLocation(); 

distance = sqrt((mPointl.x - mPoint2.x) * (mPointl.x - mPoint2.x) 
+ (mPointl.y - mPoint2.y) * (mPointl.y - mPoint2.y)); 

deltax = (mPointl.x + mPoint2.x)/2 - psprite-»getPositionX(); 
deltay = (mPointl.y + mPoint2.y)/2 - psprite-»getPositionY(); 


} 


void HelloWorld::touchesMoved(const std::vector«Touch*»5& touches, Event  *event) 


{ 


H- 


f (touches.size() >= 2){ 
Point mPoint1 = touches.at(0)-»getLocation(); 
Point mPoint2 = touches.at(1)-»getLocation(); 
float mdistance = sqrt((mPointl.x - mPoint2.x) * (mPointl.x 
一 mPoint2.x) + 
(mPointl.y - mPoint2.y) * (mPointl.y - mPoint2.y)); 
mscale = mdistance / distance * mscale; 
distance = mdistance; 
psprite-»setScale (mscale); 
float x = (mPointl.x + mPoint2.x 


g£] 


)/2 - deltax; 
oat y = (mPointl.y + mPoint2.y)/2 - deltax; 
psprite-»setPosition (Point (x, y)); 
deltax (mPointl.x + mPoint2.x)/2 - psprite-»getPositionX(); 
deltay (mPointl.y + mPoint2.y)/2 - psprite-»getPositionY(); 


} 

} 

void HelloWorld::touchesEnded(const std::vector«Touch*»5& touches, Event  *event) 
{ 
} 
void HelloWorld: :touchesCancelled (const std::vector«Touch*»& touches, Event  *event) 
{ 

} 


首先 是 实现 缩放 这 个 逻辑 ， 使 用 touchesBegan 检 测 如 果 触 摸 点 的 个 数 大 于 2， 那 么 取 前 两 个 点 ， 使 用 两 点 间距 离 公式 ( 横 纵 坐标 坐标 差 的 和 平方 开 根 号 ) 计算 这 两 个 点 的 距离 ; 在 touchesMoved 如 果 
触摸 点 的 个 数 大 于 2， 继 续 计算 这 两 个 点 的 距离 ， 然 后 通过 距离 比 计算 得 到 缩放 比例 比 ， 调 用 精灵 类 的 setScale 设 置 缩放 比例 即 可 。 


另外 ， 除 了 缩放 处 理 外 ， 还 需要 处 理 位置 问 题 ， 在 调用 touchesBegan 时 计算 两 触 点 中 点 位 置 和 精灵 锚 点 的 差 ， 在 touchesMoved 中 ， 随 着 缩放 ， 保 持 两 触 点 中 点 和 精灵 锚 点 的 差 不 变 即 
可 ，touchEnded 和 touchCancelled 中 不 需要 修改 ， 运 行 效果 如 图 7-3 所 示 。 
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[eaglView  setMultipleTouchEnabled: YES]; 


7.3 ”Cocos2D-X 中 的 加 速度 传感器 事件 


智能 手机 的 游戏 与 应 用 中 ， 经 常会 用 到 加 速度 传感器 事件 来 丰富 用 户 的 操作 ， 比 如 赛车 游戏 中 通过 摇动 手机 控制 前 进 方向 ， 以 及 动作 过 关 游 戏 中 通过 加 速度 传感器 来 控制 角色 的 移动 和 跳跃 方向 等 。 
Cococ2D-X 中 使 用 EventListenerAcceleration 加 速度 传感器 监听 来 获得 加 速度 事件 的 变化 ，EventListenerAcceleration 继 承 自 EventListener。 


7.3.1 Acceleration 结构 体 


定义 加 速度 事件 的 回调 函数 传 入 Acceleration 结 构 体 ，Acceleration 中 的 数据 见 表 7-4。 


7-4 Acceleration 结 构 体 的 数据 


数据 名 ^ 8 


— x 轴 分 数据 (以 重力 加 速度 为 单位 ) 


X | H 

y y 轴 分 数据 (以 重力 加 速度 为 单位 ) 
2 z 轴 分 数据 (以 重力 加 速度 为 单位 ) 
timestamp Нн] 


Acceleration 结 构 体 存储 了 加 速度 传感器 的 数据 ， 包 括 时 间 戳 和 坐标 轴 上 的 加 速度 值 ， 这 个 值 以 重力 加 速度 作为 单位 ， 因 此 ， 要 获得 相应 坐标 轴 的 加 速度 的 值 时 ， 需 要 乘 上 重力 加 速度 g 值 ， 见 代码 清单 


1-10, 
代码 清单 7-10 ”获得 相应 坐标 轴 的 加 速度 的 值 


ptTemp.x += pAccelerationValue-»x * 9.81f; 
ptTemp.y -= pAccelerationValue->y * 9.81f; 


7.3.2 实战 : 加 速度 传感器 事件 的 使 用 


要 在 Layer 布 景 层 中 获得 加 速度 传感器 事件 的 数据 ， 首 先 要 在 初始 化 函数 中 加 入 人 允许 接收 加 速度 传感器 事件 的 函数 ， 见 代码 清单 7-11。 该 段 代 码 出 自 tests 项 目 中 的 AccelerometerTest 文 件 夹 下 的 


AccelerometerTest.cpp 文 件 中 的 AccelerometerTest 类 。 


void AccelerometerTest::onEnter() 


{ 


= 


Layer::onEnter(); 
Device::setAccelerometerEnabled (true); 

auto listener = EventListenerAcceleration::create( 

CC CALLBACK 2(AccelerometerTest::onAcceleration, this)); 
 eventDispatcher-» 
addEventListenerWithSceneGraphPriority(listener, this); 

auto label = LabelTTF::create(title().c str(), "Arial", 32); 
addChild(label, 1); 
label-»setPosition( Point (VisibleRect::center().x, 
VisibleRect::top().y-50) ); 

ball = Sprite::create ("Images/ball.png"); 
 ball-»setPosition (Point (VisibleRect::center().x, 
VisibleRect::center().y)); 

addChild( ball); 

 ball-»retain(); 


在 Layer 布 景 层 中 的 onEnter 国 数 中 加 入 setAccelerometerEnabled (true) ， 使 得 加 速度 事件 可 以 被 捕获 ， 然 后 重 写 didAccelerate 国 数 ， 见 代码 清单 7-12。 该 段 代 码 出 自 tests 项 目 中 的 
AccelerometerTest 文 件 夹 下 的 AccelerometerTest.cpp 文 件 中 的 AccelerometerTest 类 。 


void AccelerometerTest::onAcceleration(Acceleration* асс, Event* event) 


{ 


auto pDir = Director::getInstance(); 
if ( ball == NULL ) { 
return; 


to ballSize = Jball-»getContentSize(); 
to ptNow = ball-»getFPosition(); 
to ptTemp = pDir-»convertTOoUI (ptNow); 
Temp.x += acc-»x * 9.81f; 
Temp.y -= acc-»y * 9.81f; 
to ptNext = pDir-»convertToGL (ptTemp); 

[X POS(ptNext.x, (VisibleRect::left().xtballSize.width / 2.0), 
VisibleRect::right().x - ballSize.width / 2.0)); 

[X POS(ptNext.y, (VisibleRect::bottom().ycballSize.height / 2.0), 
VisibleRect::top().y - ballSize.height / 2.0)); 
 ball-»setPosition (ptNext); 


goce n 
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在 onAccelerate 函 数 中 获得 Acceleration 结 构 体 ， 获 得 x 轴 和 y 轴 以 重力 加 速度 为 单位 的 加 速度 值 ， 分 别 乘 以 重力 加 速度 值 获得 相应 的 加 速度 ， 运 行 效果 如 图 7-4 所 示 。 


MainMenu 


图 7-4 加 速度 事件 处 理 效 果 


使 用 iOS 系 统 的 设备 中 只 有 Home 键 ,而 且 按 下 Home 键 程序 进入 后 台 。 而 使 用 Android 系 统 的 部 分 设备 会 有 Menu 键 和 返回 键 ， 因 此 有 时 需要 检测 设备 的 键盘 输入 ，Cocos2D-X 使 用 
EventListenerKeyBoard 监 听 按 键 事 件 。 


要 在 Layer 布 景 层 中 获得 按键 事件 的 数据 ， 首 先 要 在 初始 化 函数 中 加 入 允许 接收 按键 事件 的 函数 ， 见 代码 清单 7-13。 该 段 代 码 出 自 tests 项 目 中 的 KeypadTest 文 件 夹 下 的 KeypadTest.cpp 文 件 中 的 
KeypadTest 类 。 


KeypadTest: : KeypadTest () 
{ 


auto s = Director::getInstance()-»getWinSize(); 

auto label = LabelTTF::create("Keypad Test", "Arial", 28); 
addChild (label, 0); 

label->setPosition( Point(s.width/2, s.height-50) ); 

auto listener - EventListenerKeyboard::create(); 
listener-»onKeyReleased = 

CC CALLBACK 2 (KeypadTest::onKeyReleased, this); 
eventDispatcher-» 


addEventListenerWithSceneGraphPriority (listener, this); 
// 
创建 提示 标签 
label = LabelTTF: :create ("Please press any keyhttp://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/0EBPS/Text/...", "Arial", 22); 


 label-»setPosition(Point(s.width / 2, s.height / 2)); 
addChild( label, 0); 
 label-»retain(); 


之 后 便 可 以 重 写 onKeyReleased 函 数 ， 见 代码 清单 7-14， 该 段 代码 出 自 tests 项 目 中 的 KeypadTest 文 件 夹 下 的 KeypadTest.cpp 文 件 中 的 KeypadTest 类 。 


/-14 ЕВ EonKeyReleasedERZ 


void KeypadTest::onKeyReleased (EventKeyboard::KeyCode keycode, Event* event) 


{ 


=~ H- 


f (keycode == EventKeyboard::KeyCode::KEY BACKSPACE 


— 


 label-»setString("BACK clicked!"); 
} 
else if (keycode == EventKeyboard::KeyCode::KEY MENU) 
{ 


} 


 label-»setString ("MENU clicked!"); 


运行 效果 如 图 7-5 所 示 。 


Keypad Test 


Please press any key... 


MainMenu 


图 7-5 ”按键 事件 处 理 实例 运行 效果 
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Cocos2D-X 的 Ul 系 统 是 众多 开发 者 “吐槽 ”的 “ 重 灾 区 ” , УНУН, ШАУКЕН К, ПОЧ ЖЕ О Н ЫЕНЕН TRAR, ТАЈМЕР ИНА, EIS 
ZH, 并且 支持 CocoStudio。 本 节 介 绍 Cocos2D-X 3.0 提 供 的 全 新 Ul 控 件 系统 ， 它 们 都 继承 自 widget 类 。widget 类 是 节点 的 子 类 ， 提 供 了 是 否 让 按钮 有 效 、 是 否 让 按钮 高 亮 等 公共 函数 。 


说 明 ，widget 所 有 的 子 类 控件 都 是 以 场景 中 z 轴 位 置 来 分 配 优先 级 的 ， 这 样 会 不 会 造成 不 灵活 的 问题 ” 当 某 些 在 “后 面 ”显示 的 控件 优先 级 需要 大 于 前 面 的 控件 时 ， 这 就 没有 办 法 实现 了 。 实 际 项 目 中 
是 否 需要 再 次 加 入 优先 级 可 以 设置 的 功能 呢 ? 还 要 根据 具体 项 目 来 决定 。 


7.5.1 4+ 


从 最 早 的 Menultem， 到 后 来 的 ControlButton， 按 钮 的 功能 在 不 断 迭 代 开 发 中 越 来 越 易 用 ， 按 钮 控件 Button 集 成 了 之 前 的 功能 ,创建 Button 控 件 见 代码 清单 7-15， 该 段 代码 出 自 tests 项 目 中 的 
UlButtonTest, 


代码 清单 7-15 ”创建 Button 控 件 


Button* button = Button::create(); 
button-»setTouchEnabled (true); 

button-»loadTextures ("cocosui/backtotoppressed.png", 
"Ccocosui/backtotopnormal.png", ""); 
button-»setTitleText ("Title Button"); 
button-»setPosition (Point (widgetSize.width / 2.0f, 
b 


widgetSize.height / 2.0f)); 
utton-»addTouchEventListener (this, 
toucheventselector (UIButtonTest Title::touchEvent)); 


— 
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代码 清单 7-16 “按钮 回调 函数 


void UIButtonTest Title::touchEvent(Ref *pSender, TouchEventType type) 


switch (type) 
{ 


case TOUCH EVENT BEGAN: 

displayValueLabel-» 

setText (String::createWithFormat ("Touch Down")-» 

getCString()); 

break; 

case TOUCH EVENT MOVED: 
displayValueLabel-» 

setText (String::createWithFormat ("Touch Move") -> 

getCString()); 

break; 
case TOUCH EVENT ENDED: 

displayValueLabel-» 

setText (String::createWithFormat ("Touch Up")-» 

getCString()); 

break; 
case TOUCH EVENT CANCELED: 

 displayValueLabel-» 

setText (String::createWithFormat ("Touch Cancelled")-» 

getCString()); 

break; 
default: 

break; 


和 触摸 事件 一 样 ， 按 钮 事件 也 分 为 开始 、 移 动 、 结 束 和 取消 。 运 行 效果 如 图 7-6 所 示 。 
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图 7-6 创建 的 按钮 


7.5.2 Е 


选择 框 CheckBox 控 件 的 创建 直接 调用 create 函 数 就 可 以 完成 ， 创 建 后 设置 相关 贴图 。 创 建 的 具体 过 程 见 代码 清单 7-17， 该 段 代 码 出 自 tests 项 目 中 的 UICheckBoxTest 类 。 


代码 清单 7-17 创建 CheckBox 控 件 


CheckBox* checkBox = CheckBox::create(); 
checkBox-»setTouchEnabled (true); 


checkBox-»loadTextures ( 
// 

正常 状态 下 贴图 
"cocosui/check box normal.png", 
// 

按 下 状态 时 贴图 
"Cocosui/check box normal press.png", 
// 

激活 时 贴图 
"cocosui/check box active.png", 


// 


按钮 无 效 状 态 正常 时 贴图 
"cocosui/check box normal disable.png", 


// 
按钮 无 效 状态 激活 时 贴图 


"cocosui/check box active disable.png"); 


checkBox-»setPosition (Point (widgetSize.width / 2.0f, 
widgetSize.height / 2.0#)); 
checkBox-»addEventListenerCheckBox (this, 
checkboxselectedeventselector 
(UICheckBoxTest::selectedEvent)); 


创建 方式 和 按钮 类 似 ， 也 是 在 loadTextures 中 传 入 需要 对 应 的 贴图 ， 包 括 普通 状态 、 按 下 状态 、 有 效 状态 和 无 效 状 态 等 ， 对 应 的 事件 处 理 包 括 选中 和 取消 ， 运 行 效 果 如 图 7-7 所 示 。 


图 7-7 选择 框 运 行 效果 


7.5.3 ”滚动 列表 


除了 按钮 和 选择 框 以 外 ， 还 有 进度 条 和 图 片 视图 等 ， 这 些 控件 的 用 法 和 按钮 和 选择 框 类 似 ， 所 以 不 袭 述 ， 本 节 介 绍 滚动 列表 ， 如 果 曾 经 使 用 Cocos2D-X 2.0 开 发 并 且 使 用 过 它 的 滚动 列表 ， 一 定 会 记得 
那 种 继承 代理 的 方式 ， 这 样 在 Lua 使 用 时 会 有 很 多 的 问题 ，3.0 版 本 把 它 变 成 了 干净 的 控件 ， 使 用 起 来 更 加 方便 ， 创 建 方式 见 代 码 清单 7-18。 


代码 清单 7-18 创建 滚动 列表 


ListView* listView = ListView::create(); 

// 

设置 方向 

listView-»setDirection (SCROLLVIEW DIR VERTICAL); 
// 

可 触摸 

listView-»setTouchEnabled (true); 
listView-»setBounceEnabled (true); 


背景 图 
listView-»setBackGroundImage ("cocosui/green edit.png"); 
listView-»setBackGroundlImageScale9Enabled (true); 
listView-»setSize(Size(240, 130)); 
listView-»setPosition (Point ((widgetSize.width - backgroundSize.width) 

/ 2.0£ *(backgroundSize.width - listView-»getSize().width) / 2.0f, 

(widgetSize.height - backgroundSize.height) / 2.0f + 

(backgroundSize.height - listView-»5getSize().height) / 2.0f)); 
listView-»addEventListenerListView (this, 
listvieweventselector(UIlListViewTest Vertical::selectedItemEvent)); 
uiLayer-»addaChild (listView); 


为 列表 添加 项 目 可 以 使 用 如 下 集中 方式 ， 见 代码 清单 7-19。 


代码 清单 7-19 ”向 滚动 列表 中 添加 项 目 


// 

在 列表 末尾 添加 自 定 义 项 目 
listView->pushBackCustomItem (custom item); 
// 

在 指定 位 置 插入 自 定义 项 目 


istView-»insertCustomItem(custom item, items count); 


为 了 避免 重复 创建 项 目 ， 还 可 以 提前 传 入 一 个 默认 项 目 ， 然 后 调用 插入 默认 项 目 ， 见 代码 清单 7-20。 


代码 清单 7-20 ”调用 插入 默认 项 目 


// 

传 入 默认 模型 
listView->setItemModel (default item); 
int count = аггау->соџпі (); 

for (inti = 0; i < count / 4; ++1) 


{ 
// 
向 最 后 插入 


listView-»pushBackDefaultItem(); 
} 


for (inti = 0; i < count / 4; ++i) 


{ 
// 
自 定 义 位 置 插入 


listView-»insertDefaultItem(0); 
} 


7.54 输入 框 
从 TextFeild 到 EditBox， 输 入 框 的 各 种 版 本 不 亚 于 按钮 ， 同 样 ， 最 新 版 本 的 输入 框 也 抛弃 了 代理 模式 ， 还 加 入 了 密码 功能 (密码 显示 星 号 ) 和 限制 字数 功能 ， 使 用 方法 见 代码 清单 7-21。 
代码 清单 7-21 输入 框 的 使 用 


TextField* textField = TextField::create(); 


是 否 设置 按钮 
textField-»5setPasswordEnabled (true); 


按钮 显示 字符 
textField-»setPasswordStyleText 
textField-»setTouchEnabled (true); 
textField-»setFontName ("Marker Felt"); 
textField-»setFontSize (30); 
textField-»setPlaceHolder ("input password here"); 
textField-»setPosition (Point (screenSize.width / 2.0f, screenSize.height / 2.0#)); 
textField-»addEventLlistenerTextField (this, 

textfieldeventselector (UITextFieldTest Password::textFieldEvent)); 


— 


Ш! ; 


— 


处 理 回 调包 括 输入 法 调 出 和 输入 法 关闭 两 种 ， 对 应 开始 输入 和 输入 完成 。 


7.6 ”本章 小 结 


本 章 介绍 Cocos2D-X 中 的 事件 处 理 ， 分 别 介绍 了 触 屏 事件 、 加 速度 传感器 事件 、 按 键 事件 。 之 后 介绍 了 滚动 列表 和 输入 文字 的 输入 框 的 相关 类 ， 学 习 本 章 需 结合 具体 知识 与 实例 ， 进 一 步 完 善 你 的 练习 
例子 ， 下 一 章 将 介绍 地 图 编辑 器 的 相关 知识 。 


第 8 章 Cocos2D-X 中 的 瓦 片 地 图 集 


整个 游戏 场景 中 除了 主角 精灵 之 外 ， 游 戏 的 地 图 背景 也 是 “重头 戏 ”， 在 手机 游戏 的 开发 中 为 了 节约 内 存 空 间 ， 使 用 图 素 拼接 的 方法 组 成 整个 地 图 。 也 就 是 说 ， 首 先 定 下 图 素 块 (一 般 为 正方 形 ) 的 大 
小 ， 然 后 用 美术 绘制 图 素 块 ， 最 后 由 策划 和 美术 根据 不 同 项 目的 需求 使 用 地 图 编辑 器 将 图 素 拼 接 成 大 地 图 ， 然 后 将 生成 的 数据 文件 和 图 素 交 给 程序 处 理 。 


81 瓦 片 地 图 集 及 编辑 器 简介 


Cocos2D-X 支 持 瓦 片 地 图 集 的 使 用 ， 可 以 解析 相应 的 地 图 编辑 器 生成 的 数据 文件 ，Tiled 地 图 编辑 器 有 Qt (О toolkit 跨 平台 C++ 图 形 用 户 界面 应 用 程序 开发 框架 ) 版 本 和 Java 版 本 两 个 版 本 ， 可 以 生成 
Cocos2D-X 支 持 的 地 图 文件 ， 地 图 编辑 器 支持 普通 视角 地 图 和 45 度 角 地 图 。 


8.1.1 瓦 片 地 图 的 种 类 及 用 途 


Cocos2D-X 中 的 瓦 片 地 图 集 支 持 普通 视角 地 图 和 45 度 角 地 图 ， 普 通 视 角 地 图 如 图 8-1 所 示 。 


图 8-1 普通 视角 地 图 


普通 视角 地 图 在 多 种 类 型 的 游戏 中 被 使 用 ， 诸 如 横 板 动作 闯关 游戏 、 俯 视 视 角 游 戏 等 。 这 时 ， 需 要 在 开发 中 为 不 同 的 图 素 块 赋予 不 同 的 “意义 ”， 例 如 部 分 地 图 块 含有 阻挡 ， 部 分 地 图 块 含有 机 关 等 ， 
一 般 通过 给 图 素 “ 编 号 ”的 方法 获得 ， 在 程序 处 理 时 获得 图 素 的 “编号 ”就 可 以 做 相应 的 判断 了 ， 关 于 这 点 ， 本 章 有 详细 的 介绍 。45 度 角 地 图 如 图 8-2 所 示 。 


mint;mgarnrio Builder: Shield: Мах: 1 00I 000 


351624 I "a : | Бн 28M 4 101 738 


Tem uL Max: 1.001.000 
m 515754 *' 


| Attack! 


图 8-2 45 度 角 地 图 


45 度 角 地 图 一 般 应 用 于 塔 防 游戏 、 战 棋 游戏 和 建造 类 游戏 中 。 在 这 些 游戏 中 ， 经 常 要 用 户 点 击 相应 的 地 图 图 素 块 并 在 图 素 块 上 “建设 ” 某 些 “建筑 ”， 这 就 需要 获得 图 素 的 索引 并 修改 图 素 。 关 于 45 度 


角 地 图 获得 索引 并 修改 图 素 的 问题 也 会 在 本 章 8.3 节 进行 详细 的 介绍 。 


8.1.2. ”地 图 编辑 器 Tiled 


Cocos2D-X 支 持 Tiled 生 成 的 地 图 数据 文件 ，Tiled (下 载 地 址 为 http://www.mapeditor.org/) 是 一 个 以 普遍 使 用 为 目标 的 地 图 编辑 器 ， 可 以 在 不 同 的 引擎 中 使 用 ， 目 前 最 新 版 本 是 使 用 Qt 框架 进行 开 
发 的 。 之 前 也 有 java 版本， 使 用 二 者 的 目的 就 是 可 以 使 编辑 器 跨 平 台 ， 这 点 在 Cocos2D-X 开 发 中 比较 重要 。 因 为 Cocos2D-X 有 跨 平 台 特 性 ， 可 能 开发 者 所 使 用 的 操作 系统 各 不 相同 ， 为 了 让 大 家 都 可 以 看 到 
地 图 的 效果 ， 编 辑 器 的 “ 跨 平台 ”也 是 必要 的 。Tiled 的 特性 如 下 。 


` 使 用 多 种 编码 形式 的 地 图 数据 文件 ， 使 它 可 以 在 不 同 的 游戏 引擎 中 通用 。 
. 支持 普通 视角 和 45 度 两 种 视角 。 

. 可 以 把 对 象 放 在 精确 到 像素 的 位 置 。 

` 撤销 / 重 做 和 复制 /粘贴 的 操作 支持 。 

` 图 素 、 层 次 和 对 象 等 通用 的 概念 。 

' 自动 重新 载 入 图 素 集 。 

* 可 以 重 置 图 素 的 大 小 和 偏 移 。 

* 图 章 刷 和 填充 等 高 效 工具 的 使 用 。 

t 支持 以 通用 的 格式 输入 /输出 来 打开 和 存储 文件 。 


在 本 书 成 书 之 时 Tiled 最 新 版 本 是 0.9.1， 本 书 使 用 的 是 Mac 版 本 。 下 载 后 直接 双击 文件 进行 安装 ， 安 装 后 运行 效果 如 图 8-3 所 示 。 
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88-3 Tiled 运行 效果 
提示 目前 ，Java 版 本 已 经 不 再 维护 ， 由 于 Java 版 本 中 有 一 些 功能 在 Qt 版 本 中 是 没有 的 ， 所 以 该 版 本 依然 在 网 站 上 提供 下 载 。 
8.1.3 ”用 Tiled 编 辑 地 图 


下 面 我 们 就 来 一 步 步 地 讲解 如 何 使 用 Tiled 编 辑 地 图 。 


选择 “文件 ”一 “新 文件 ”新 建 地 图 工程 ， 在 弹出 的 对 话 框 中 设置 地 图 的 高 度 和 宽度 、 图 素 块 的 大 小 ， 以 及 地 图 的 方向 。 另 外 ， 新 版 本 中 提供 了 TMX 文 件 的 输出 格式 ,包括 XML 格 式 、CSV (Comma 
Separated Value， 喜 号 分 隔 值 ) 以 及 之 前 提供 的 Base64 加 密 模式 (包含 gzip 和 和 zlib 压缩 格式 ) ， 选 择 之 前 版 本 中 默认 的 Base64 加 密 模式 和 和 gzip 压缩 格式 。 新 建 地 图 界面 如 图 8-4 所 示 。 


高 度 : 100 ж |[9 
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. Cancel | 


图 8-4 新建 地 图 


1) 选择 “地 图 ”一 “新 图 块 ”或 者 是 向 编辑 器 拖 入 图 素 文 件 ， 在 弹出 的 对 话 框 中 设置 图 素 块 的 大 小 、 边 距 和 偏 移 量 等 ， 如 图 8-5 所 示 。 
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885 ”导入 图 素 文件 
2) 选择 完成 图 素 块 后 ， 左 下 角 的 部 分 就 显示 了 目前 的 图 素 图 块 ， 选 择 相应 图 块 便 可 以 填充 基 图 素 块 了 ， 如 图 8-6 所 示 。 


3) 右键 选择 图 素 添 加 属性 ， 弹 出 对 话 框 如 图 8-7 所 示 ， 图 素 的 数据 可 以 在 程序 中 获得 ， 关 于 如 何 获得 将 在 8.3.4 节 详细 介绍 。 
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图 8-6 EL EE DO 


图 8-7 添加 图 块 属性 


4) 在 图 8-8 所 示 的 工具 栏 中 选择 不 同 工 具 填充 ， 包 括 图 章 刷 、 填 充 、 橡 色 擦 和 选择 矩形 区 域 等 。 使 用 图 章 刷 可 以 为 每 个 格 填充 图 素 ， 填 充 是 批量 填充 图 素 ， 橡 皮 探 可 以 探 掉 之 前 的 填充 图 素 。 


图 8-8 填充 图 素 工 具 


5) 屏幕 的 石上 脚 显示 图 层 编辑 部 分 ， 如 图 8-9 所 示 。 


图 8-9 ”图 层 编辑 部 分 


6) 通过 图 层 编 辑 部 分 可 以 选择 需要 编辑 的 图 层 ， 并 且 可 以 排除 其 他 层 的 干扰 。 图 层 编辑 部 分 的 按键 包括 新 建屋、 改变 层 之 间 的 顺序 、 复 制图 层 以 及 删除 图 层 等 按钮 ， 如 图 8-10 所 示 。 


图 8-10 图 层 编辑 部 分 按钮 


Т) 选择 菜单 中 的 图 层 部 分 也 可 以 帮助 编辑 修改 图 层 ， 如 图 8-11 所 示 。 
8) 关于 地 图 的 参数 也 可 以 在 地 图 菜单 中 修改 ， 地 图 菜单 如 图 8-12 所 示 。 


9) 通过 视图 菜单 修改 地 图 在 编辑 器 中 的 缩放 比例 ， 如 图 8-13 所 示 。 
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图 8-13 “视图 ”菜单 


10) 最 后 把 TMX 文 件 保存 在 指定 的 位 置 ， 如 图 8-14 所 示 。 


т аааїтх 今天 下午 1:18 
т bbb.tmx SX 下午 1]:54 


fixed-ortho-test2.png 2013-10-30 下 午 5:4 
hexa-test.tmx 2013-10-30 下 午 5:4 


hexa-tiles.png 2013-10-30 下 午 5:4 
iso-test-bug787.tmx 2013-10-30 下 午 5:4 
iso-test-movelayer.tmx 2013-10-30 下 午 5:4 
iso-test-objectgroup.tmx 2013-10-30 TF 5:4 
iso-test-vertexz.tmx 2013-10-30 TF'F5:4 
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Files of type: | Tiled 地 图 文件 (*.tmx) 


| 新 建文 件 夹 | 


图 8-14 另存 为 界面 


8.1.4 设置 地 形 


一 块 一 块 去 编辑 地 形 有 时 会 显得 不 是 很 方便 ， 因 为 我 们 往往 会 做 一 些 “ 重 复工 作 ” ， 比 如 有 些 城墙 地 图 块 需要 “拐角 ”和 “ 墙 体 ”拼接 而 成 ， 这 个 拼接 过 程 其 实 是 没有 什么 “技术 含量 ”的 工作 ， 另 外 
有 时 候 我 们 要 赋予 这 个 地 形 以 一 定 意义 ， 就 不 用 把 它 涉及 的 所 有 地 图 图 素 都 加 上 属性 ， 而 是 把 它们 当做 一 类 来 处 理 ， 这 时 就 需要 一 个 功能 来 规划 这 些 图 块 ， 于 是 从 0.9.0 版 本 开始 ，Tiled 支 持 地 形 功能 ， 点 击 
编辑 器 右 下 角 ( 见 图 8-15) 最 右边 的 “图 片 ”， 进 入 地 形 编辑 界面 ， 如 图 8-16 所 示 。 


图 8-15 “最 右边 按钮 为 编辑 器 地 形 编 辑 图 标 


图 8-16 ”地形 编 辑 窗口 


点 击 左下 方 的 加 号 增加 地 形 ， 减 号 删除 地 形 ， 在 选中 某 个 地 形 的 状态 下 可 以 点 击 图 片上 的 图 素 设置 地 形 ， 可 以 以 图 素 1/4 大 小 设置 地 形 。 如 果 不 小 心 设置 错误 ， 可 以 使 用 “撤销 ”按钮 或 者 按 下 “ 清 
除 ”按钮 ， 这 时 再 次 点 击 某 个 块 就 是 去 除 地 形 的 标记 。 右 键 选中 该 地 形 就 弹出 可 以 设置 地 形 属性 的 选项 ， 选 择 它 就 可 以 进入 地 形 属性 编辑 界面 ， 和 图 素数 据 是 一 样 的 界面 ， 如 图 8-17 所 示 。 


地 形 设 置 完毕 ， 关 闭 地 形 编辑 界面 ， 选 择 下 方 的 “地 形 ” 选 项 卡 就 可 以 看 到 目前 编辑 的 地 形 了 ， 如 图 8-18 所 示 。 


选择 界面 上 方 填充 工具 中 的 图 片 小 图 标 就 可 以 进入 地 形 填 充 方式 ， 填 充 的 地 形 如 图 8-19 所 示 ， 上 下 两 块 石 地 是 同一 块 地 形 。 


| Cancel | 


图 8-17 ”地形 属性 编辑 
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图 8-18 ”地 形 选择 


另外 可 以 提高 工作 效率 的 方法 是 使 用 “迷你 地 图 ”工具 ， 在 编辑 大 号 地 图 时 可 以 选择 某 一 块 的 地 图 进行 编辑 ， 还 可 以 滑动 滚轮 来 修改 这 个 范围 的 大 小 ， 迷 你 地 图 如 图 8-20 所 示 。 
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图 8-19 ”地 形 编辑 结果 
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图 8-20 迷你 地 图 界面 


8.1.5 ”添加 对 象 层 


Tiled 还 有 一 个 功能 就 是 可 以 给 地 图 添加 对 象 层 ， 单 击 新 建 层 按 键 便 可 以 选择 添加 对 象 层 ， 如 图 8-21 所 示 。 


对 象 层 中 摆 放 对 象 位 置 可 以 精确 到 像素 ， 可 以 在 对 象 层 中 加 入 图 素 和 图 形 层 ， 如 图 8-22 所 示 ， 是 对 象 层 可 以 使 用 的 按钮 。 


右键 选择 对 象 对 象 属性 就 可 以 修改 对 象 的 属性 ， 如 图 8-23 所 示 。 


图 8-21 添加 对 象 层 


8-22 ”向 对 象 层 中 加 入 对 象 
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88-23 ”修改 对 象 属性 


可 以 把 对 象 层 理解 为 没有 图 素 格 限制 的 地 图 层 ， 对 象 层 常常 用 于 放置 场景 中 的 大 图 素 以 及 场景 中 的 机 关 等 ， 属 于 不 受 大 小 位 置 限制 的 图 素 。 


8.2 Cocos2D-X 中 和 Tiled 相 关 的 类 


通过 之 前 的 介绍 ， 想 必 对 Tiled 已 经 有 些 了 解 ， 它 并 不 是 专门 为 Cocos2D-X 设 计 的 编辑 器 ， 它 的 设计 目的 时 广泛 适应 各 种 引擎 ， 在 Cocos2D-X 中 使 用 Tiled 编 辑 的 地 图 ， 首 先 要 在 资源 文件 中 加 入 图 素 文 
件 和 地 图 数据 文件 ， 然 后 使 用 Cocos2D-X 中 的 瓦 片 地 图 类 人 处理， 本 节 介绍 在 Cocos2D-X 中 使 用 Tiled。 


8.2.1 Tiled 数 据 文件 
Tiled 生 成 的 TMX 数 据 文件 ， 是 一 种 类 似 于 XML 文件 的 数据 文件 ， 具 体 示 例 见 代码 清单 8-1。 


代码 清单 8-1 TMX 数 据 文件 


<?xml version-"1.0" encoding="UTF-8"?> 

<!DOCTYPE map SYSTEM "http:// mapeditor.org/dtd/1.0/map.dtd"» 

«map version-"1.0" orientation-"isometric" width-"64" height-"64" tilewidth-"64" 
tileheight-"32"» 

«tileset firstgid-"1" name-"Untitled" tilewidth-"64" tileheight-"115" spacing-"2" 
margin-"2"» 


«image source-"iso-test.png"/» 

«/tileset» 

«layer name-"Layer 0" width-"64" height-"64"» 
«data encoding-"base64" compression-"gzip"» 
HASIAAAAAAAAAtT3DWOkAAAwDOoYPsv3PHOEfBVVNVVVVVVVVVVVVVVVWNNNN £H'] 3hYNOAQAAA 
«/data» 


</layer> 
«layer name-"Layer 1" width-"64" height="64"> 
«data encoding-2"base64" compression-"gzip"» 
HASIAAAAAAAAA*2Y2Y'DIAxFeeD/v3nEQ6UMYvGWAGCt8pKptAgnXZrFdSpLOqKcHkCTJJO9Tyf 3X 
7js6vc6vdJ+27+3vPOm/ 5m4DQfubPkLxv-*UYR/ssggOsqN2nvz5rG4Gd5t42ddIuGhRtUWww 
OkDVFSEGKw1UGOAzswHFv4j 6OWPe2O0BN/26-c9YC4vrXrOlT-*agVWn8htvsHd-tyaM8Er3LHP 
6k/ ISG2APvaX/2d900P91e8ixjVPqPnsqj8ylHglao7PiekjrPURXBuUwfX-tvmc4a3w3D3bv 
8GgPie8091rVBz3ZQbKfc209q3se7CA90yk5PkItSDpGS32n5wJXhlVeyG3zJhw/ScZKPSNO 
YrWnrWII7fvfRlvref /mxgoe9DcoedCs3-ro5s3bUel8iqWFYtPOiv2Glz3PmgId9UArXr9J9 
OivSWJrzHFS0-crRQ6nHwhov4Gcp3Agqi 66q4ET2LRVNLhOBSfOwEpo6QgSeZ9xt2hvRzzgKN2tP 
kiRJEgl1/QULzBABAAAA- 
«/data» 
</1ауег> 
«/map» 


其 中 存储 了 地 图 的 基本 信息 ， 之 后 是 层次 的 信息 ， 层 次 的 信息 使 用 Base64 方 式 加密 ， 使 用 gzip 方 式 压缩 。Cocos2D-X 引 警 中 提供 了 解码 和 解压 缩 的 方式 ， 在 定义 Cocos2D-X 中 的 瓦 片 地 图 集 时 ， 传 入 
数据 的 地 址 即 可 。 下 面 介绍 Cocos2D-X 中 的 瓦 片 地 图 集 类 TMXTiledMap。 


8.2.2 ” 瓦 片 地 图 集 类 TMXTiledMap 


TMXTiledMap 类 是 Cocos2D-X 中 支持 Tiled 编 码 数据 文件 形式 的 类 ， 用 于 解析 地 图 集 的 数据 文件 ， 首 先 来 看 瓦 片 地 图 集 类 TMXTiledMap 的 继承 关系 ， 如 图 8-24 所 示 。 


图 8-24 TMXTiledMap 的 继承 关系 


瓦 片 地 图 集 类 具有 如 下 的 特性 。 


. 其 中 每 个 图 素 都 是 一 个 精灵 类 。 


* 每 个 图 素 的 精灵 类 在 需要 时 调用 tileAt 骂 数 时 被 创建 。 


- 每 个 图 素 都 可 以 进行 旋转 缩放 等 设置 。 


- 在 运行 时 可 以 添加 和 删除 。 


“ 可 以 修改 z 轴 顺序 来 改变 遮挡 关系 。 


. 每 个 图 素 可 以 设置 锚 点 。 


- 每 个 层 都 可 以 添加 子 节点 。 


. 每 个 图 素 可 以 有 唯一 的 标签 。 


. 每 个 图 素 可 以 有 唯一 的 z 轴 值 。 


. 每 个 对 象 组 被 放 在 数组 中 。 


* 对 象 可 以 拥有 自己 的 属性 。 


“ 可 以 为 地 图 、 地 图 层 、 对 象 组 和 对 象 加 入 属性 。 


当然 ， 使 用 TMXTiledMap 类 也 有 一 些 限制 ， 比 如 每 


函数 名 
getMapSize 
setMapSize 
getTileSize 
setTileSize 
getObjectGroups 
setObjectGroups 
getProperties 
setProperties 
layerNamed 
objectGroupNamed 
propertyNamed 
propertiesForGID 
getObjectGroup 


8.2.3 ”地 图 层 类 TMXLayer 


表 8-1 
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建 值 对 集合 


Wb Aer Ж: 


层 只 有 一 个 地 图 集 ， 不 过 这 并 不 影响 我 们 的 使 用 ，TMXTiledMap 类 的 常用 函数 见 表 8-1。 


瓦 片 地 图 集 类 TMXTiledMap 的 常用 函数 


介 20 
单位 为 图 素 格 
单位 为 图 系 格 


获得 地 图 尺寸 ， 
设置 地 图 尺 才 ， 
Ma У 
WEAR RT 
获得 对 象 数组 
设置 对 象 效 组 
获得 地 图 属性 
设置 键 值 对 数组 
根据 层次 名 称 获 得 层次 

根据 对 象 组 名 称 获 得 对 象 组 

根据 属性 名 获得 属性 值 

根据 GID (tile Global ID ， 图 素 全 局 ID) 获得 键 值 对 集合 
返回 特殊 层 的 地 图 对 象 组 (封装 好 的 地 图 对 象 数 据 结构 ) 


pu: 


地 图 由 地 图 层 来 组 成 ，TMXLayer 是 精灵 帧 批 处 理 类 的 子 类 ， 其 继承 关系 如 图 8-25 所 示 ， 除 非 层 次 被 设置 不 可 见 ， 否 则 在 创建 时 层次 都 会 被 创建 ， 设 置 为 不 可 见 的 层次 会 在 设置 为 可 见 时 被 创建 。 


BlendProtocol 


Object 


TextureProtocol 


spriteBatchNode 


TMX Layer 


图 8-25 CCTMXLayet 类 继承 关系 


地 图 层 类 可 以 设置 cc_vertexz 属 性 为 整 型 数字 ， 一 旦 这 个 属性 被 设置 ， 所 有 图 素 的 z 轴 深度 值 都 被 设置 为 这 个 值 。 另 外 cc_alpha_func 属 性 默认 设置 为 0， 如 果 和 希望 某 一 层 半 透 ， 可 以 设置 cc_ alpha_func 
的 值 ， 比 如 设置 为 0.5。TMXLayer 类 的 常用 函数 见 表 8-2。 


表 8-2 ”CCTMXLayet 类 的 常用 函数 


函数 名 返回 类 型 п A 


getLayerSize 尺寸 АНЫМ, 
setLayerSize iH БЕК, "ur Re 
getMapTileSize 尺寸 S У 

] 


setMapTileSize i ELA RENT 


getTileSet 

setTileSet ix ELA ЖЕ 

getProperties 键 但 对 集合 多 得 地 图 属性 

setProperties 25 设置 键 值 对 数组 

releaseMap 25 A E ДЫ [A] 

tileAt IRK Fs 4s ВА о LE STR 24 


函数 名 返回 类 型 п £8 


tileGIDAt 整 型 根据 图 素 横 纵 坐标 索引 获得 图 素 的 gid 值 ， 也 就 是 图 素 在 图 素 集 上 的 顺序 
setTileGID 宇 设置 图 素 横 上 纵 坐 标 驼 引 上 的 图 率 gid， 也 就 是 说 设置 gid KERR 
removeTileAt zs His ds [A] Жж ЛЕК RS LM ER TZ or LES Ж 

positionAt 点 坐标 根据 图 素 横 纵 坐 标 索引 获得 图 条 位 置 

setupTiles T 创建 设置 图 系 

propertyNamed 字符 串 根据 属性 名 获得 属性 值 


8.24 ”地 图 精灵 组 类 TMXObjectGroup 


TMXObjectGroup 类 代表 地 图 中 的 精灵 组 ， 其 继承 关系 如 图 8-26 所 示 。 


TMXObjectGroup 


图 8-26 ”TMXObjectGroup 类 继承 关系 


TMXObjectGroup 类 的 常用 函数 见 表 8-3 所 示 。 


48-3 TMXOPbjectGroup 类 的 常用 函数 
函数 名 返回 类 型 jt A 
getPositionOffset MS LANAI 
setPositionOffset 设置 俩 移 位置 
getObjects 获得 对 象 效 组 
setObjects 设置 对 象 数组 
getGroupName 字符 数组 获得 组 名 
setGroupName 设置 组 名 
getProperties 锋 得 地 图 属性 
Яа 


setProperties | 室 | 设置 健 值 对 数组 
objectNamed EHER 根据 对 象 名 获 f 


得 键 值 集合 
propertyNamed 字符 串 根据 属性 名 获得 属性 值 


8.3 ”Cocos2D-X 中 使 用 地 图 和 地 图 相关 类 
之 前 介绍 了 Tiled 的 使 用 和 Cocos2D-X 中 与 地 图 相关 的 类 ， 本 节 介绍 这 些 类 的 使 用 。 首 先 来 看 新 建 地 图 类 并 在 地 图 上 显示 的 方法 
8.3.1 新建 地 图 类 并 在 地 图 中 显示 
在 Tiled 地 图 编辑 器 中 将 地 图 编辑 好 之 后 ， 我 们 便 可 以 在 程序 中 使 用 了 ， 使 用 方法 见 代 码 清单 8-2。 代 码 引 自 example8-1 的 createMapAndSshow 函 数 。 


代码 清单 8-2 创建 并 显示 地 图 


void HelloWorld: :createMapAndShow () 
{ 


auto map = TMXTiledMap::create ("orthogonal-test2.tmx"); 
addChild (map, 0, 1); 
auto& children = map-»getChildren(); 
for(const auto &obj : children) { 
auto child = static cast«SpriteBatchNode*» (obj); 


child-»getTexture ()-»setAntiAliasTexParameters(); 


首先 新 建 TMXTiledMap 对 象 ， 传 入 TMX 文 件 的 路 径 ， 然 


运行 效果 如 图 8-27 所 示 。 


后 像 其 他 节点 一 样 将 TMX-TiledMap 对 象 加 入 当前 场景 中 (或 者 布景 层 中 ) 。 


з зт 


98-27 初始 化 并 显示 地 图 示例 运行 效果 


8.3.2 ”普通 视角 地 图 获得 对 应 位 置 图 素 


得 相应 位 置 的 图 素 。 注 意 ， 传 入 的 参数 坐标 并 非 点 坐标 ， 而 是 地 图 的 行列 坐标 。 下 面 的 例子 获得 地 图 四 个 角 的 图 素 ， 将 它们 进行 放 缩 处 理 ， 


在 实际 游戏 中 ， 地 图 往往 不 是 一 成 不 变 的 ， 需 要 根据 玩家 的 操作 有 交互 的 效果 ， 比 如 经 过 一 个 地 块 ， 


代码 清单 8-3 ”获得 相应 位 置 图 素 


后 的 代码 的 功能 是 获得 精灵 批 处 理 对 象 ， 并 设置 抗 锯齿 内 容 ， 


Ё 
O wm H а ый am [ ud ET ышк Fam сш ш ш= ш m ш: n" 


这 个 地 块 上 的 花 开 了 ， 这 时 就 需要 对 图 素 进 行 一 系列 操作 。 普 通 视 角 的 地 图 通过 tileAt 函 数 就 可 以 获 
见 代码 清单 8-3， 代 码 引 自 example8-1 的 createMapAndGetTile 


void HelloWorld: :createMapAndGetTile () 
{ 


auto mapnotchange = TMXTiledMap::create ("orthogonal-test4.tmx"); 


addChild (mapnotchange, 
mapnotchange-»setPosition (50,240); 


0, 1); 


auto map = TMXTiledMap::create ("orthogonal-test4.tmx"); 
addChild (map, 0, 2); 
map-»setPosition (570,240); 
SpriteBatchNode* child = nullptr; 
auto& children = map-»getChildren(); 


for(const auto 


&node : 


children) { 


child = static cast«SpriteBatchNode*» (node); 
child-»getTexture ()-»setAntiAliasTexParameters () ; 


) 


map-»setAnchorPoint 


(Point(0, 0)); 


auto layer = map-»getLayer ("Layer 0"); 
»getLayerSize(); 


auto s = layer- 


Sprite* sprite; 
Sprite = layer- 
sprite-»setScal 
Sprite = layer-»getTlil 
Sprite-»setScal 
Sprite = layer-»getTlil 
Sprite-»setScal 
Sprite = layer-»getTlil 
Sprite-»setScal 


»getTil 


e(2); 


eAt (Point (0,0)); 


e(2); 


eAt (Point (s.width-1,0)); 


e(2); 


eAt (Point (0, s.height-1)); 


e(2); 


еді (Point (s. width-1,s.height-1)); 


改变 ， 


和 上 一 节 介 绍 的 过 程 类 似 ， 也 是 新 建 TMXTiledMap 对 象 ， 传 入 TMX 文 件 的 路 径 ， 之 后 获得 
layerNamed 函 数 传 入 层次 的 名 称 获得 地 图 层 TMXLayer 对 象 ， 最 后 地 图 层 对 象 调用 tileAt 函 数 获得 图 素 ， 这 


运行 效果 如 图 8-28 所 示 ,， 左 


左边 的 地 图 是 没有 做 任何 改变 的 ， 右 边 的 是 对 四 个 角 做 了 缩放 处 理 的 地 图 。 


青 灵 批 处 理 对 象 ， 并 设置 抗 锯齿 内 容 ， 


时 获得 的 对 象 是 精灵 ， 对 于 这 些 精 灵 


最 后 设置 锚 点 等 。 初 始 化 完成 之 后 ， 通 过 TMXTiledMap 对 象 调用 


灵 进 行 缩放 的 操作 。 需 要 注意 的 是 ， 图 素 间 的 遮挡 关系 并 没有 
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图 8-28 ”获得 图 素 块 后 放大 的 地 图 和 原 地 图 的 对 比 图 


一 般 情 况 下 ， 通 过 具体 位 置 获得 地 图 的 行列 数 ， 这 需要 一 个 转换 ， 普 通 视 角 地 图 的 转换 很 简单 ， 如 代码 清单 8-4 所 示 。 


代码 清单 8-4 ”坐标 转化 成 行列 


indexx = (playerpoint.x) / map-»getTileSize().width; 
indexy = map-»getMapSize().height - (playerpoint.y) / 
map-»getTileSize().height; 


总 体 的 思路 是 具体 位 置 除 以 图 素 的 宽 高 ， 但 这 里 需要 注意 ， 在 y 轴 的 处 理 上 略 有 不 同 ， 因 为 Cocos2D-X 坐 标 系 中 y 轴 是 从 下 到 上 依次 增加 ， 而 在 地 图 中 的 行 数 则 是 从 上 到 下 增加 的 ， 这 里 就 需要 做 一 个 转 
损 ， 用 总 的 行 数 减 去 y 轴 坐标 除 以 图 素 高 的 结果 才 是 所 在 图 素 的 函数 。 


8.3.3 45 度 角 地 图 获得 对 应 位 置 图 素 


通过 具体 位 置 获得 地 图 的 行列 数 的 转换 ，45 度 角 地 图 相对 复杂 些 ， 以 平面 的 观点 来 看 ， 每 个 图 素 块 是 个 鞭 形 ， 如 图 8-29 所 示 。 


98-29 Жж 


CEKEN : 1 的 对 角 线 ，A 为 坐标 点 ， 只 需求 出 DC 和 CB 这 两 条 在 蒜 形 楞 上 的 映射 线 就 可 以 除 以 单独 图 素 的 棱 长 获得 行列 值 。 这 需要 一 些 数学 知识 。ABCD 是 个 平行 四 边 形 ， 所 以 ， 对 于 三 
角形 ADC， 只 要 获得 AD 和 DC 的 长 就 可 以 (AD 等 于 BC) ， 可 以 通过 正弦 定理 解 得 (AD/sin 角 ACD=AC/sin 角 ADC=DC/sin 角 CAD) 因为 可 以 求 出 AC (两 点 距离 公式 ) ， 可 以 获得 AC 关 于 水 平 线 的 角 ， 通 
过 差 角 公式 可 以 获得 角 ACD， 角 CAD， 然 后 角 CDA 也 就 获得 了 ， 三 角形 也 就 解 开 了 。 如 代码 清单 8-5 所 示 。 


代码 清单 8-5 ”45 度 角 地 图 通过 具体 位 置 获得 地 图 的 行列 数 


Point HelloWorld: :convertto2a (float x,float y) 


auto map = static cast<TMXTiledMap*>( getChildByTag(1)); 
int mapWidth = map-»getMapSize().width * map-»getTileSize().width; 
int mapHeight = map-»getMapSize().height * 
map-»getTileSize().height; 
double distanse,sinl,sinll,sin22,cos11,cos]l1; 
int d2x,d2y; 
double mystatic5 = sqrt(5.0); 
double mystatic = 16 * mystatic5; 
if(x > mapWidth/2)|í 

distanse = sqrt((x - mapWidth/2) * (x - mapWidth/2) + 

(mapHeight - y) * (mapHeight - y)); 


sinl = (mapHeight - y)/distanse; 
cosl = (x - mapWidth/2)/distanse; 
sinll = (sinl * 2 - cosl) / mystatic5; 
соѕ11 = (sinl + соѕ1 * 2) / mystatic5; 


d2y = distanse * 5 / 4 * sinll / mystatic; 
sin22 = (2 * sinl + соѕ1) / mystatic5; 
d2x = distanse * 5 / 4 * sin22 / mystatic; 
return Point (d2x,q32y); 

}else{ 
distanse = sqrt ((mapWidth/2 - x) * (mapWidth/2 - x) + 


(mapHeight - у) * (mapHeight - у)); 
sinl = (mapHeight - y)/distanse; 
cosl = (mapWidth/2 - x)/distanse; 
sinll = (sinl * 2 - cosl) / mystatic5; 
соѕ11 = (sinl + cosl * 2) / mystatic5; 
d2x = distanse * 5 / 4 * sinll / mystatic; 
// sin22 = 4.0 * cos11 / 5 + 3.0 * зіп11 / 5; 
sin22 = (2 * sinl + соѕ1) / mystatic5; 
d2y = distanse * 5 / 4 * sin22 / mystatic; 


return Point (d2x,q32y); 


另外 还 有 一 种 简单 的 向 量 方法 ， 把 向 量 CA 向 向 量 CD 和 向 量 CB 方 向 投影 ， 获 得 这 两 个 方向 上 投影 的 x，y 值 ， 即 两 个 方向 坐标 ， 然 后 用 解 方程 的 方式 解 出 x 和 y 就 获得 了 坐标 ， 如 代码 清单 8-6 所 示 。 


代码 清单 8-6 45 度 角 地 图 通过 具体 位 置 获得 地 图 的 行列 数 的 向 量 方法 


Point HelloWorld::convertto2dSimple (float x,float y) 


auto map = static cast«TMXTiledMap*»( getChildByTag(1)); 

int mapWidth = map-»getMapSize().width * map-»getTileSize().width; 
int mapHeight = map-»getMapSize().height * 
map-»2getTileSize().height; 
double mystatic5 = sqrt(5.0); 
int tileWidthratio - 2; 

int tileHeightratio = 1; 

t deltaX = x - mapWidth/2; 

int deltaY = y - mapHeight; 


int d2x = (tileWidthratio * deltaY + tileHeightratio * deltaX) / 
(tileWidthratio * tileHeightratio * map-»getTileSize().width 
* mystatic5 / 2) + 13; 

int d2y = (tileWidthratio * deltaY - tileHeightratio * deltaX) / 
(tileWidthratio * tileHeightratio * map-»getTileSize().width 
* mystatic5 / 2) + 13; 

return Point (d2x,d2y); 


8.3.4 ”GID 值 的 使 用 


GID 即 tile global id (图 素 全 局 ID) 是 该 地 图 格 使 用 图 素 与 其 他 格 不 同 的 标志 ， 也 就 是 说 ， 它 是 和 图 素 绑 定 在 一 起 的 ， 使 用 相同 的 地 图 图 素 地 图 格 的 GID 值 是 一 样 的 ， 当 某 些 格 的 图 素 变化 时 ，GID 的 值 
也 随 之 变化 。 也 可 以 通过 改变 GID 值 来 设置 图 素 ， 下 面 就 在 上 一 节 的 基础 上 开发 “种 树 ” 小 程序 ， 见 代码 清单 8-7。 


代码 清单 8-7 “种 树 ” 小 程序 


bool HelloWorld::onTouchBegan(Touch* touch, Event* event) 


{ 


auto m tBeginPos = Point (touch-»getLocation().x, 
touch-»getLlocation().y); 
auto map = static cast«TMXTiledMap*»( getChildByTag (1)); 
Point mapp = map-»getPosition(); 
Point aimmapindex = convertto2d(m tBeginPos.x - mapp.x, 
m tBeginPos.y - mapp.y); 
if(aimmapindex.x < 0 || aimmapindex.y < 0 || aimmapindex.x >= 
map-»getMapSize().width || 
aimmapindex.y >= map-»getMapSize().height) 


{ 


} 

TMXLayer* layer = map-»layerNamed ("grass"); 
layer-»setTileGID(4,aimmapindex); 

return true; 


return false; 


这 个 小 程序 功能 简单 ， 即 点 击 哪 块 草坪 就 在 哪 块 草坪 上 种 树 。 首 先 获得 用 户 点 击 的 位 置 ， 判 断 地 图 当前 位 置 ， 将 点 击 地 图 的 相对 位 置 传 入 convertto2d 函 数 中 。convertto2d 函 数 即 上 一 节 介绍 的 通过 具 
体位 置 获 得 地 图 的 行列 数 的 转换 的 函数 ， 如 果 索 引 是 正确 值 (没有 出 界 ) ， 通 过 地 图 层 的 setTileGID 函 数 设 置 GID 值 在 地 图 上 “种 树 ”。 运 行 效果 如 图 8-30 和 图 8-31 所 示 。 


图 8-30 “种 树 ” 程 序 刚刚 启动 时 显示 的 地 图 
8.3.55 ”地 图 块 属性 的 获得 
在 很 多 游戏 中 ， 不 同 的 地 图 块 往往 被 赋予 不 同 的 “属性 ”， 比 如 动作 游戏 中 ， 不 同 的 墙 块 代表 不 同 的 意义 ， 有 的 不 可 通过 ， 也 有 的 可 能 是 通过 后 会 对 数值 等 产生 影响 。8.1.3 节 已 经 介绍 了 如 何 为 图 素 块 


添加 属性 值 。 在 Cocos2D-X 中 获得 这 个 属性 值 ， 需 要 两 步 ， 首 先 获得 它 所 在 的 层 ， 然 后 通过 图 素 块 的 坐标 索引 值 在 该 层 中 获得 这 个 图 素 块 的 GID 值 ， 通 过 GID 值 在 地 图 中 取得 这 个 属性 值 了 ， 见 代码 清单 8- 
8, 


点 击 屏幕 左下 角 的 地 图 格 ， 该 格 上 “长 出 ”一 棵 树 


代码 清单 8-8 ”获得 地 图 中 图 素 块 的 索引 值 


void HelloWorld::createMapAngaGetTileProperity () 
{ 


auto map = TMXTiledMap::create ("ortho-objects.tmx"); 
addChild (map, 0, 1); 

auto layer = map-»getLayer ("logic"); 

Point playerindex = Point(0,0); 

int tilegid = layer-»getTileGIDAt (playerindex); 


H- 


f(tilegid > 0){ 
log ("Properties:$s",map-»getPropertiesForGID 
(tilegid) .asValueMap () ["collion"] .asString().c str()); 


获得 这 个 属性 后 ， 就 可 以 根据 属性 判断 写 一 系列 逻辑 了 ， 这 个 示例 获得 属性 值 后 将 属性 值 打印 ， 结 果 如 图 8-32 所 示 。 


cocos2d: Properties: 


图 8-32 ”获得 地 图 属性 值 打印 结果 


8.3.6 在 地 图 中 加 入 精灵 


完整 的 游戏 中 ， 地 图 中 还 要 加 入 角色 在 地 图 中 行走 ， 还 要 加 入 不 规则 的 图 形 进行 修饰 ， 比 如 路 边 的 树木 和 人 花花 草草 ， 这 时 就 涉及 向 地 图 中 加 入 图 片 精灵 ， 其 实 向 地 图 中 加 入 图 片 精灵 的 方法 和 向 一 般 节 
点 中 加 入 子 节点 是 一 样 的 ， 见 代码 清单 8-9。 


代码 清单 8-9 ”向 地 图 中 加 入 子 节点 


void HelloWorld::createMapAndAdaChilad () 
{ 
auto map = TMXTiledMap::create ("test-zorder.tmx"); 
addChild (map, 0, 1); 
auto s = map-»getContentSize(); 
map-»setPosition (Point (-480,0)); 
| testSp - Sprite::create("grossinis sisterl.png"); 
ар->ааасһі1а (т testSp, map-»getChildren().size() ); 
| testSp-»retain(); 
nt mapWidth = map-»getMapSize().width * map-»getTileSize().width; 
testSp-»setPosition( 
CC POINT PIXELS TO POINTS (Point (mapWidth/2,0))); 
| testSp-»setAnchorFoint (Point (0.5#,0)); 


Bp us 


d 


加 入 精灵 节点 的 过 程 昌 然 简单 ， 但 是 如 何 让 精灵 和 地 图 有 更 好 地 配合 和 交互 呢 ， 如 何 让 人 物 和 地 图 “ 融 为 一 体 ” 呢 ”这 需要 地 图 将 层次 处 理 和 程序 中 的 处 理 配 合 起 来 ， 首 先 来 看 编辑 器 中 的 处 理 ， 如 图 
8-33 所 示 ， 将 树木 按照 显示 层级 进行 分 层 ， 这 样 它们 在 地 图 中 不 再 属于 同一 层 ， 就 可 以 将 精灵 穿插 在 这 些 树 木 之 中 ， 达 到 和 地 图 融 为 一 体 的 目的 。 


trees 1 
HH trees2 
EH trees3 


EB grass 


图 8-33 ”在 地 图 中 将 树木 层 从 前 往 后 分 为 ttees1、ttees2 和 ttees3 


在 createMapAndAddChild 国 数 中 添加 代码 ， 让 人 物 精 灵 从 前 往 后 移动 ， 并 使 用 schedule 调 用 重 置 精灵 z 轴 坐标 的 方式 ， 使 得 人 物 精 灵 和 地 图 的 遮挡 关系 随时 变化 ， 见 代码 清单 8-10， 运 行 效果 如 图 8- 
34 和 图 8-35 所 示 。 


代码 清单 8-10 ” 重 置 人 物 z 轴 坐标 代码 


void HelloWorld::repositionSprite (float dt) 


{ 
// 
获得 地 图 


auto p = m testSp-»getPosition(); 
р = CC POINT POINTS TO PIXELS (p); 
auto map = getChilaByTag (1); 
// treel tree2 tree3 
加 上 草地 一 共 是 四 层 


// newz 
坐标 是 这 样 计 算 的 ， 
根据 z u | 
as dac d 
由 于 z 


值 越 小 越 靠 前 ， 需 要 用 4 


у 


р 


int пем? = 4 - (р.у / 48); 
new2 = std::max(newZ,0); 
map-»reorderChild(m testSp, newz); 


} 
void HelloWorld::createMapAndAdaChilad () 
{ 


auto map = TMXTiledMap::create ("test-zorder.tmx"); 
addChild (map, 0, 1); 

auto s = map-»getContentSize(); 
map-»setPosition (Point (-480,0)); 

m testSp - Sprite::create("grossinis sisterl.png"); 
m 

m 


ар->ааасһі1а (т testSp, map-»getChildren().size() ); 
testSp-»retain(); 


m testSp-»setPosition( 

CC POINT PIXELS TO POINTS (Point (mapWidth/2,0))); 
m testSp-»setAnchorPoint (Point (0.5#,0)); 

// 
加 入 动作 


auto move = MoveBy::create(10, Point (300,250)); 


auto back = move-»reverse(); 
auto seq = Sequence::create (move, back,NULL); 
m testSp-»runAction( RepeatForever::create (seq) ); 


/ 
定时 器 更 新 


schedule( schedule selector (HelloWorld::repositionSprite) ); 


} 


int mapWidth = map-»getMapSize().width * map-»getTileSize().width; 


图 8-35 ”精灵 在 中 间 时 效果 ， 可 以 看 到 人 躲 在 树 的 后 面 


游戏 中 可 以 将 精灵 加 入 到 地 图 中 ， 并 和 地 图 进行 奖 豆 ， 还 可 以 在 地 图 中 直接 加 入 精灵 层 。 获 得 精灵 层 的 相关 信息 的 方法 是 首先 通过 调用 地 图 的 getObjectGroup 函 
关 方 法 就 可 以 获得 精灵 的 相关 信息 ， 如 代码 清单 8-11 所 示 。 


数 


XHEA4BELyzE LE 
获得 精灵 层 ， 


7 


A 


v 


后 


调用 精灵 层 的 相 


void HelloWorld::createObjectsLayerTest 


| t 


一 


) 


auto map = TMXTiledMap::create ("ortho-objects.tmx"); 
addChild (map, -1, 0); 
Size CC UNUSED s = map-»getContentSize(); 
CCLOG("ContentSize: $f, $f", s.width,s.height); 
auto group = map-»getObjectGroup ("Object Group 1"); 
auto& objects = group-»getObjects(); 

Value objectsVal = Value (objects); 

CCLOG("$s", objectsVal.getDescription().c str()); 


获得 的 对 象 层 通过 调用 getObjects 获 得 值 的 数组 ， 最 后 转换 成 值 获得 对 象 层 的 数据 打印 ， 如 图 8-36 所 示 。 


B 


am 


name: Object 
width: 352 
x: B 

type: 
height: 32 
gid: 

y: B 


o 


y: 64 

gid: 

height: 32 
x: 224 

type: 

width: 1688 
name: Object 


width: 125 
name: platform 
x: 42 

type: platform 
gid: 

friction: 1.8 
height: 68 

y: 131 


图 8-36 “对象 层 数 据 打印 


这 些 信息 包括 宽 高 名 称 和 GID 值 等 ， 这 些 信息 可 以 帮助 我 们 更 好 地 操作 对 象 层 。 


84 本章 小 结 


本 章 介绍 Cocos2D-X 中 的 地 图 编辑 器 使 用 ， 首 先 介 绍 了 Tiled 的 使 用 ， 然 后 介绍 了 TMXTiledMap 类 和 其 相关 类 的 使 用 ， 最 后 介绍 了 TileMapAtlas 类 。 学 习 本 章 ， 既 要 了 解 地 图 编辑 器 的 使 用 ， 还 要 了 解 
地 图 数据 的 相关 内 容 ， 最 后 理解 并 使 用 地 图 类 和 其 相关 类 ， 包 括 普通 视角 和 45 度 角 地 图 的 使 用 。 下 章 介绍 声音 和 存储 的 相关 内 容 。 


第 9 章 ”Cocos2D-X 中 的 声音 、 存 储 和 网络 


游戏 除了 界面 和 动画 ， 还 需要 音乐 、 音 效 的 配合 ， 在 很 多 经 典 的 游戏 中 ， 音 乐 、 音 效 起 到 控制 游戏 节奏 的 作用 ， 比 如 有 些 过 关 游 戏 中 ， 在 进入 Boss 关 时 ， 用 音乐 变化 提示 玩家 ， 另 外 还 有 一 些 游戏 ， 以 
音乐 节奏 来 控制 出 怪 的 频率 等 ， 使 玩家 可 以 完全 融入 到 游戏 中 。 移 动 设 备 进入 智能 时 代 后 ， 设 备 对 于 音乐 的 支持 更 好 ， 这 样 更 有 助 于 我 们 开发 游戏 。 


除了 声音 之 外 ， 游 戏 的 数据 存储 对 于 玩家 来 说 也 很 重要 ， 对 于 比较 大 型 的 游戏 来 说 这 点 更 为 重要 ， 本 章 将 介绍 Cocos2D-X 中 自 带 的 游戏 存储 类 的 使 用 方式 。 另 外 网 络 部 分 可 以 为 我 们 的 游戏 添加 互动 的 


成 分 ，Cocos2D-X 中 支持 短 连 接 HTTP (HyperText Transfer Protocol， 超 文本 传输 协议 ) 协议 和 长 连接 Socket 协 议 ， 本 章 介绍 这 两 种 协议 。 


9.1 Cocos2D-X 中 的 声音 


Cocos2D-X 中 的 声音 采用 SimpleAudioEngine 类 来 实现 跨 平 台 的 声音 引擎 ， 这 点 和 Cocos2D-iPhone 有 所 不 同 ， 在 声音 处 理 方面 Cocos2D-iPhone 里 包含 CocosDenshion 库 ， 从 低 到 高 提供 三 层 接 
п: CDSoundEngine、CDAudioManager 和 SimpleAudioEngine， 但 整个 库 完全 依赖 于 OpenAL (Open Audio Library) 来 实现 。OpenAL 可 以 软 实现 或 硬件 实现 开源 库 。 在 其 他 平台 上 ， 引 警 无 法 提供 
CocosDenshion 底 层 的 支持 ， 只 支持 顶层 的 SimpleAudioEngine 类 ， 它 是 开发 者 最 常用 到 的 一 层 。 它 的 头 文件 可 以 在 Cocos2D-X 库 文件 audio 文 件 夹 下 的 Header 找 到 。 


9.1.1 “Cocos2D-X 在 不 同 平台 下 支持 的 声音 


Cocos2D-X 在 不 同 平台 下 支持 的 背景 音乐 格式 如 表 9-1 所 示 。 


表 9-1 Cocos2D-X 在 不 同 平台 下 支持 的 背景 音乐 格式 


平台 名 称 支持 类 型 


Android android.media.MediaPlayer 类 文 持 的 格式 ， 包 括 МРЗ, WAV 和 3GP 
iOS Cocos2D-iPhone 中 CocosDenshion 支持 的 类 型 ， 推 荐 MP3 和 CAF 
Win32 MID fil WAV 


Cocos2D-X 在 不 同 平台 下 支持 的 音效 格式 如 表 9-2 所 示 。 


表 9-2 ”Cocos2D-X 在 不 同 平台 下 支持 的 音效 格式 


平台 名 称 支持 类 型 


Android 对 OGG 格式 支持 最 好 ， 同 时 支持 WAV 格式 
iOS Cocos2D-iPhone 中 CocosDenshion 支持 的 类 型 ， 推 荐 CAF 
Win32 MID 和 WAV 


由 于 在 不 同 平 台 上 支持 的 格式 不 尽 相同 ， 可 以 借助 音频 格式 转换 软件 来 帮助 我 们 转换 不 同 的 音频 格式 。 


注意 有 些 开发 者 会 有 这 样 的 疑惑 ， 使 用 WAV 和 MP3 格 式 的 音效 在 Android 和 iO 〇 OS 平台 上 都 可 以 放出 来 ， 为 什么 还 要 费事 转换 格式 呢 ? 这 是 因为 WAV 格 式 的 声音 作为 音效 播放 时 ， 由 于 它 是 硬件 解码 的 声 
dp, 同时 只 可 以 播放 一 个 声音 ， 这样 就 会 有 这 种 现象 : 前 一 个 音效 没有 放 完 的 情况 下 ， 再 播放 下 一 个 音效 时 ， 前 一 个 音效 会 被 停止 ,这样 会 对 游戏 效果 造成 影响 ， 因 此 在 iOS 和 Android 上 采用 不 同 的 音效 文 
件 是 必要 的 。 


在 移动 设备 上 开发 游戏 或 者 应 用 ， 如 何 节 约 资源 大 小 是 个 永远 的 课题 ， 有 人 可 能 把 更 多 的 精力 放 在 对 图 片 资源 的 大 小 调整 上 ， 而 忽略 了 对 于 声音 大 小 的 调整 。 可 以 从 以 下 几 方 面 来 减少 声音 的 大 小 : 
MP3 文 件 有 可 能 采用 立体 声 ， 在 转变 格式 的 时 候 可 以 把 它 改 变 为 单 声 道 ， 这 样 大 小 可 以 减少 一 半 ; 在 iOS 设 备 上 面 ， 任 何 比 特 率 大 于 192kbps 的 声音 都 是 浪费 ， 所 以 尽量 采用 低 的 比特 率 来 获得 最 好 的 音质 
效果 。 但 是 需要 在 效果 和 大 小 做 个 平衡 ， 一 般 来 说 ，96~ 128kbps 是 比较 合适 的 。 最 后 ， 大 部 分 的 声音 文件 使 用 11、22、44， 或 者 48kHz 采 样 率 。 采 样 率 越 低 ， 声 音 文件 越 小 。 但 是 ， 这 样 声音 质量 也 会 越 
低 。44kHz 已 经 达到 了 CD 的 音质 了 ， 所 以 超过 44kHz 的 采样 率 都 是 浪费 ， 但 是 修改 时 一 定 注 意 不 只 修改 采样 率 ， 因 为 这 样 会 改变 音 高 。 


9.1.2 SimpleAudioEngine 类 的 常用 函数 


之 前 已 经 介绍 过 ，SimpleAudioEngine 类 是 CocosDenshion 库 中 开发 者 最 常用 到 的 一 层 ， 它 也 是 Cocos2D-X 支 持 的 唯一 一 层 ， 它 的 头 文 件 可 以 在 Cocos2D-X 库 文件 audio 文 件 夹 Header 找 到 ， 它 的 常 
用 遂 数 见 表 9-3。 


表 9-3 SimpleAudioEngine 类 的 常用 函数 
Б: 返回 类 型 ^ ж 


. А, 7n p te кз. Sr. гг 
preloadBackgroundMusic WIES КТ НЕК 
已 


playBackgroundMusic 2 播放 背景 音乐 ， 第 二 个 参数 为 是 否 循环 播放 
stopBackgroundMusic 停止 背景 音乐 

pauseBackgroundMusic 25 PTT RAR 

resumeBackgroundMusic e 重新 开始 背景 音 朱 

rewindBackgroundMusic ze 回放 背景 音乐 

isBackgroundMusicPlaying Ae 1 IETRODCH тт 

getBackgroundMusic Volume MH АСЫ ЖЫ Н 


Ш 
С 
ДШ 
| 
f 
T 


Ju E JE 
setBackgroundMusicVolume 


getEffectsVolume 


- 
А ' 


— 
KA 
ag | mj 


e. 
€ 


-— 
- 


mE 


setEffects Volume 2x 


EXER fa 
ER | Ka 


> 数 为 文件 路 人 径 和 是 否 循 环 


zer 
ё 

" 

| 

b 
>=; 
M 
^ 
Sn 


playEffect 


ES 
WE 
IN 


pauseEffect 


pauseAllEffects 


resumeEffect 


resumeAllEffects 


stopEffect 


stopAllEffects 


preloadEffect 


unloadEffect 


返回 类 型 jt g 
e 暂停 音效 ， 参 数 为 调用 PlayEffect 时 获得 
空 暂停 所有 音效 
2 开始 音效 ， 参 数 为 调用 PlayEffect 时 获 和 
空 开始 所 有 音效 
ES 停止 音效 ， 参 数 为 调用 PlayEffect 时 获得 的 ID 号 
空 停止 所 有 音效 
空 ШЖ ТА 
25 将 预 加 载 的 音 


的 ID = 


导 的 ID 号 


效 从 绥 存 中 删除 


需要 说 明 的 是 ， 音 效 的 playEffect 函 数 可 以 传 入 三 个 参数 来 控制 音 


效 的 播放 ， 分 别 如 下 。 


"Pitch: 值 越 大 音调 越 高 ， 同 时 播放 时 间 越 短 ， 可 以 调 出 高 八 度 低 八 度 的 ， 不 调整 是 1。 


Pan: 左右 声 道 控制 ，0 是 双 声 道 。 


: Gain: 音量 量 大 小 ， 1 是 不 调整 。 


9.1.3 JER: SimpleAudioEngine 类 的 使 用 


SimpleAudioEngine 类 的 使 用 ， 出 自 bookexamples 项 目 中 的 Example9Scene 文 中 的 CocosDenshionTest.cpp 文 件 。 该 示例 是 一 个 菜单 可 以 控制 声音 播放 ， 首 先 在 初始 化 函数 中 预 加 载 声音 


加 载 声音 的 具体 方法 见 代 码 清单 9-1。 


代码 清单 9-1 预 加 载 声音 和 设置 音量 


预 


БОЛО 


SimpleAudioEngine::getInstance()-»preloadBackgroundMusic ( M 


预 加 载 音效 i 


SimpleAudioEngine::getInstance()-»preloadEffect( EFFECT Е 


H 
ESI 


设置 音效 音量 
SimpleAudioEngine::getInstance()-»setEffectsVolume (0.5); 


设置 背景 音乐 音量 


USIC 


SimpleAudioEngine: :getInstance ()-»setBackgroundMusicVolume (0.5); 


在 示例 的 菜单 中 ， 按 下 每 个 按键 会 对 声音 


代码 清单 9-2 ”对 声音 的 操作 


进行 相应 的 操作 ， 相 关 函 


数 见 代 码 清单 9-2。 


播放 背景 音乐 
SimpleAudioEngine::getInstance()-»playBackgroundMusic (MUS 


true); 


// 
停止 所 有 背景 音乐 


A. 
onc M E 


OTHER RR 


SimpleAudioEngine::getInstance()-»rewindBackgroundMusic (); 


// 
暂停 背景 音乐 


SimpleAudioEngine::getInstance()-»pauseBackgroundMusic () ; 


恢复 背景 音乐 


SimpleAudioEngine::getInstance ()-»resumeBackgroundMusic (); 


是 否 在 播放 背景 音乐 


eAudioEngine::getInstance()-»isBackgroundMusicPlaying|() 


Mag s tlc 


const float pitch = sliderPitch-»getValue(); 
const float pan = _sliderPan->getValue (); 
const float gain = sliderGain-»getValue(); 
soundId = SimpleAudioEngine::getInstance()-»playEffect(EFFECT FILE, 


К pitch, pan, gain); 


ИКТ i 


SimpleAudioEngine::getInstance()-»stopE 


fect ( soundId); 


SimpleAudioEngine::getInstance()-»pauseEf 


重新 开始 特定 音效 


SimpleAudioEngine::getInstance()-»resumeEf 


fect ( soundId); 


fect ( soundId); 


SimpleAudioEngine::getInstance()-»pauseAllEffects(); 


SCOTI PUR SER 
SimpleAudioEngine::getInstance()-»resumeAllEffects(); 
/ / 

TERA EE 
SimpleAudioEngine::getInstance()-»stopAllEffects(); 


9.2 ”Cocos2D-X 中 的 游戏 存档 


游戏 中 的 存档 可 以 保证 玩家 在 游戏 过 程 中 有 足够 的 延续 性 ， 


这 点 在 单机 游戏 开发 中 尤为 重要 。Cocos2D-X 中 支持 的 游戏 存档 类 UserDefault 可 以 作为 一 个 轻 量 化 的 数据 库 来 使 用 ， 它 支持 存储 的 数据 类 


型 包括 : bool (布尔 型 ) int (2890) , float ( 浮 点 型 ) , double ( 双 精 度 浮 点 数 ) 和 string (字符 串 型 ) 。 


9.2.1 UserDefault 类 的 常用 函数 


UserDefault 类 的 常用 国 数 见 表 9-4。 


函数 名 


getBoolForKey 


getIntegerForKey 


布尔 型 


该 键 值 的 值 不 存在 ， 


该 键 值 的 什 不 存在 ， 


表 9-4 UserDefault 类 的 常用 函数 


介 绍 
根据 传 入 的 键 值 参数 返回 相应 的 布尔 值 ， 第 二 41 
将 返回 默认 值 

的 整 型 仁 ， 第 
将 返回 默认 值 


根据 传 入 的 键 值 参数 返回 相应 的 浮 点 值 ， 第 


参数 为 可 选 的 默认 值 ， 


—— 


根据 传 入 的 键 值 参数 返回 相应 -个 参数 为 可 选 的 默认 值 ， 


-个 参数 为 可 选 的 默认 值 ， 


tFloatForK n | ань 
— t 该 键 值 的 值 不 存在 ， 将 返回 默认 值 
根据 传 入 的 键 值 参数 返回 相应 的 双 精 度 浮 点 型 值 ， 第 二 个 参数 为 可 选 的 默认 
getDoubleForKey ее "T 
值 ， 一 旦 该 键 值 的 值 不 存在 ， 将 返回 默认 值 
根据 传 入 的 键 值 参数 返回 相应 的 字符 串 值 ， 第 二 个 参数 为 可 选 的 默认 值 ， 一 


getStringForKey 


日 该 键 值 的 全 不 存在 ， 


将 返回 默认 但 


( ЖЕ) 

函数 名 п 绍 
setBoolForKey 2 第 一 个 参数 为 键 ， 第 二 个 参数 为 对 应 的 值 ， 布 尔 型 存档 
setIntegerForKey | 2: 第 一 个 参数 为 键 ， 第 二 个 参数 为 对 应 的 值 ， 整 型 存档 
setFloatForKey 25 第 参数 为 键 ， 第 二 个 参数 为 对 应 的 值 ， 浮 点 型 存档 
setDoubleForKey |^ "18 i 数 为 键 ， 第 二 个 参数 为 对 应 的 值 ， 双 精度 浮 点 型 存档 
setStringForKey 2 第 一 个 参数 为 键 ， «S T S NOMAS. FIRR 
flush 2 Ла JJ XML 文档 


9.2.2 ”实战 UserDefault 类 的 使 用 


UserDefault 类 的 使 用 实例 即 存储 数据 并 修改 ， 出 自 tests 项 目 中 的 UserDefaultTest 文 件 夹 下 的 UserDefaultTest.cpp 文 件 中 的 UserDefaultTest 类 的 doTest 函 数 。 有 具体 代码 如 代码 清单 9-3 所 示 。 


代码 清单 9-3 UserDefault 的 使 用 实例 


void UserDefaultTest::doTest () 


CCLOG ( V Y X X Ck KOC KORCKOK ERROR KICK init value ккк КОК EINE КОК, > 
ZA 
设置 默认 值 
UserDefault::getInstance()-»setStringForKey(' 'string", "valuel"); 
UserDefault::getInstance()-»setIntegerForKey ("integer", 10); 
UserDefault::getInstance()-»setFloatForKey("float", 2. 35; 
UserDefault::getInstance()-»setDoubleForKey ("double", 2.4); 
UserDefault::getInstance()-»setBoolForKey ("bool" true); 
// 
获得 并 打印 这 些 值 
std::string ret = 
UserDefault: :get Instance () -?getStringForKey ("string"); 
CCLOG("string is $s", ret.c str()); 
/ / 
双 精 度 浮 点 型 


double d = UserDefault::getInstance ()-»getDoubleForKey ("double"); 
CCLOG("double is $f", d); 
// 
整 型 
int 1 = UserDefault::getInstance ()-»getIntegerForKey ("integer"); 
CCLOG("integer is $d", i); 
/ / 
浮 点 型 
float = UserDef fault: gem [Instance ()-»getFloatForKey ("float"); 
CCLOG("float is $f", 
// 
布尔 型 
bool b = UserDefault::getInstance()-»getBoolForKey ("bool"); 
if (b) 
{ 
CCLOG("bool is true") 
} 
else 
{ 
CCLOG("bool is false"); 
// CCUserDefault::getInstance()-»flush(); 
// 
改变 这 些 值 
UserDefault::getInstance()-»setStringForKey (" string", "value2") 
UserDefault::getInstance()-»setIntegerForKey ("integer", 11); 
UserDefault::getInstance()-»setFloatForKey("float", 2.5f); 
UserDefault::getInstance()-»setDoubleForKey ("double", 2.6) 
UserDefault::getInstance()-»setBoolForKey ("bool" false); 
UserDefault::getInstance()-»flush(); 
// 
重新 获取 并 打印 
ret = UserDefault::getInstance()-»getStringForKey ("string"); 


CCLOG("string is $s", ret.c str()); 


а = UserDefault::getInstance()-»getDoubleForKey ("double"); 
CCLOG ("double is $f", а); 
i = UserDefault::getInstance()-»getIntegerForKey ("integer"); 
CCLOG ("integer is $d", i); 
f = UserDefault::getInstance ()-»getFloatForKey ("float"); 
CCLOG("float is $f", f); 
b = UserDefault::getInstance () -»getBoolForKey ("bool"); 
if (b) 
{ 
CCLOG ("bool is true"); 
} 
else 
{ 


CCLOG("bool is false"); 


这 个 示例 很 简单 ， 首 先 把 一 组 值 存 入 UserDefault 类 中 ， 然 后 获得 值 并 把 它们 输出 ， 之 后 修改 之 前 存 入 的 那 组 值 再 次 获得 值 并 输出 。 这 里 需要 注意 的 是 ，UserDefault 类 是 单 例 模 式 ， 通 过 
sharedUserDefault 函 数 获得 并 进行 操作 ， 控 制 台 的 输出 如 图 9-1 所 示 。 


siring 15 Yaluel 
double 15 2. 400000 
integer is 10 
float is 2. 300000 


bool 15 true 
Ж А ОКК after change value Жжж оо 


string 15 жаі цег 
double is z. 600000 
integer 15 11 
float is 2. 500000 
bool is false| 


图 9-1 ”控制 人 台 运 行 效果 
在 程序 退出 时 也 可 以 对 文件 进行 |/O 操 作 来 实现 数据 的 存储 ， 但 是 对 文件 进行 |/O 操 作 是 很 浪费 资源 的 ， 使 用 UserDefault 类 可 以 提高 数据 读 取 的 效率 ， 而 且 减 少 了 I/O 操 作 ， 对 于 游戏 是 有 利 的 。 


Win32 平 台 上 的 XML 文件 在 Cocos2D-X 目 录 下 的 Debug.win32 目 录 下 ，UserDefault.xml 的 内 容 如 代码 清单 9-4 所 示 。 


代码 清单 9-4 ”UserDefault.xm| 的 内 容 


<?xml version-"1.0" encoding-"utf-8"?» 
«userDefaultRoot»«string»value2«/string»«integer»11«/integer» 
«float»2.500000«/float»«double»2.600000«/double» 
«bool»false«/bool»«uername»bill man«/uername»«/userDefaultRoot» 
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当今 的 OS 和 Android 操 作 系 统 的 游戏 中 ， 除 了 网 游 以 外 ， 很 多 单机 游戏 也 有 弱 联 网 的 功能 ， 可 以 说 游戏 和 网 络 的 联系 将 会 越 来 越 紧 密 ，Cocos2D-X 中 支持 联网 的 短 连接 和 长 连接 库 ， 可 以 更 好 地 帮助 
我 们 进行 网 络 连接 的 开发 ， 本 节 将 介绍 Cocos2D-X 中 的 HTTP 和 Socket 类 库 的 使 用 方式 。 


9.3.1 ”cURL 基础 知识 


cURL 文件 传输 工具 是 瑞典 cURL 组 织 开 发 的 ， 利 用 URL 语 法 在 命令 行 方式 下 工作 可 以 访问 http://curl.haxx.se/， 它 的 标志 如 图 9-2 所 示 。 


99-2 cURLAj;& 


cURL 支持 很 多 网 络 协 议 ， 包括 FTP、FTPS、HTTP、HTTPS、GOPHER、TELNET、DICT、FILE 以 及 LDAP。cURL 同 样 支持 HTTPS 认 证 、HTTP POST 方法 、HTTP PUT 方法 、FTP 上 传 、kerberos 认 


证 、HTTP 上 传 、 代 理 服 务 器 、cookies、 用 户 名 /密码 认证 、 下 载 文件 断 点 续 传 、 上 载 文 件 断 点 续 传 : HTTP 代 理 服务 器 管道 ， 甚 至 它 还 支持 IPv6、socks5 代 理 服务 器 ， 通 过 HTTP 代 理 服务 器 上 传 文件 到 FTP 
服务 器 等 。 


cURL 在 Linux 上 的 广泛 使 用 ， 因 此 它 也 对 可 以 提高 我 们 的 跨 平 台 引 擎 的 跨 平台 性 。 


1. 初 始 化 


Cocos2D-X 中 使 用 的 是 Libcurl 的 C 语 言 接口 ， 首 先 要 进行 全 局 的 初始 化 ， 这 些 初始 化 一 般 在 程序 的 开始 调用 初始 化 函数 ， 并 且 只 调用 一 次 。 使 用 curl_global_init () 函数 进行 全 局 初始 化 ， 该 函数 通过 
参数 来 决定 ， 参 数 和 其 对 应 的 描述 如 表 9-5 所 示 。 


表 9-5 curl global init () 地 数 参 数 及 其 描述 
2 й 描 ж 
CURL GLOBAL AL 使 用 默认 参数 来 初始 化 所 有 已 知 的 内 部 子 模块 


在 Windows 操作 系统 上 ,使 Libeurl 初始 化 Win32 套 接 字 的 内 容 。 没 有 正确 的 初始 
и, ж 序 将 不 能 正确 的 使 用 套 接 字 

使 Libcurl 有 SSL ( Secure Sockets Layer， 安 全 套 接 层 ) 的 特征 ，SSL 可 确保 数据 在 网 
络 上 传输 过 程 中 不 会 被 截取 及 知 听 


CURL GLOBAL WIN32 


CURL GLOBAL SSL 


注意 ”如果 开始 没有 在 cutl_easy_perform 之 前 调用 curl_global_init () 函数 进行 全 局 初始 化 ， 程 序 会 使 用 初始 化 模式 来 执行 程序 。 
可 以 调用 curl_version_info () 函数 ， 然 后 查看 返回 信息 的 结构 体 ， 以 知道 当前 Libcur|l 版 本 所 支持 的 功能 。 


下 面 介绍 Libcur| 的 简单 接口 ， 这 些 接口 都 有 curl_easy 的 前 缀 ， 函 数 及 其 描述 如 表 9-6 所 示 。 为 了 使 用 这 些 简 单 函 数 ， 首 先 要 创建 一 个 句柄 ， 需 要 注意 的 是 ， 在 每 个 线程 里 都 要 使 用 自己 的 句柄 而 不 能 共 


表 9-6 ”Libcutl 的 简单 接口 
EB 说 BB 
curl easy init 获得 人 句柄 


设置 句柄 的 属性 和 选项 ,它们 控制 随后 的 数据 传输 。 注 意 这 是 一 个 状态 值 ， 一 次 设置 后 ， 除 
非 冉 次 修改 ， 否 则 会 保持 上 次 设置 的 属性 
size t write data 得 到 指定 URL 上 的 远程 主机 的 数据 资源 到 本 地 

将 会 连接 远程 的 站 点 ， аа Ана 传输 的 数据 。 当 它 收 到 了 数据 ， 它 就 会 调用 先 
六 设置 的 回调 困 数 。 这 个 盟 数 可 能 一 次 得 到 一 字 而 或 者 几 千 字 节 。Libcurl 会 尽 可 能 多 地 并 且 尽 
] 能 快 地 传 回 数据 。 ашшы; Jr GS ICA] WRR e CC 53 exe К US 
大 小 不 一 致 ，Libcurl 将 会 终止 操作 ， 并 返回 一 个 错误 代码 


curl easy setopt 


curl easy perform 


其 中 curl easy_setopt 函 数 的 属性 说 明 如 表 9-7 所 示 。 


表 9-7 curl easy. setoptii 2 447 Æ PE ВА 


函数 名 
CURLOPT URL 
CURLOPT WRITEFUNCTION 
CURLOPT WRITEDATA 
CURLOPT HEADER 
CURLOPT INFILESIZE 
CURLOPT HEADER 
CURLOPT TIMEOUT 
CURLOPT LOW SPEED LIMIT 
CURLOPT COOKIE 
CURLOPT CUSTOMREQUEST 
CURLOPT FILE 
CURLOPT INFILE 
СОКГОРТ WRITEHEADER 
CURLOPT PROXYUSERPWD 
CURLOPT POSTFIELDS 
CURLOPT REFERER 
CURLOPT USERAGENT 
CURLOPT FTPPORT 
CURLOPT COOKIE 


说 ВА 
URL 地 址 值 
将 得 到 的 数据 传递 给 相应 的 函数 里 
将 浮 数 传递 给 相应 的 第 四 个 参数 里 
设置 为 1， 可 以 返回 HTTP 头 的 值 
如 果 需 要 上 传 一 个 文件 到 远程 站 点 ， 这 个 选项 告诉 РНР 上 传 文件 的 大 小 
如 果 设 置 为 非 0 值 ， 可 以 把 一 个 头 包 含 在 输出 中 
设置 一 个 长 整 型 数 ， 作 为 最 长 延续 多 少 秒 
设置 一 个 长 整 型 数 ， 控 制 传送 多 少 字 节 
传递 一 个 包含 HTTP cookie 的 头 连接 
当 进 行 HTTP 请 求 时 ， 传 递 一 个 字符 被 GET 或 HEAD 使 用 
传送 的 输出 文件 
传送 过 来 的 输入 文件 
输出 的 头 部 分 
传递 一 个 形 如 [username]:[password] 格式 的 字符 串 去 连接 HTTP 代理 
传递 一 个 作为 HITP“POST” 操 作 的 所 有 数据 的 字符 串 
在 HTTP 请 求 中 包含 一 个 referer 头 的 字符 串 
在 HTTP 请 求 中 包含 一 个 user-agent 头 的 字符 串 
传递 一 个 包含 被 FTP POST 指令 使 用 的 IP 地 址 
传递 一 个 包含 HTTP cookie 的 头 连接 


一 一 一 


Е |А 


尽量 使 用 已 有 的 句柄 来 传递 函数 ，LibcurI 会 党 试 先 前 已 经 建立 好 的 连接 。 请 注意 ， 网 络 传输 是 很 “脆弱 ”的 ， 有 很 多 原因 会 导致 网 络 传输 的 失败 ， 当 传输 失败 时 ， 可 以 将 CURLOPT VERBOSE 选 项 设置 
为 1， 这 样 可 以 看 到 一 些 传输 信息 。 如 果 觉 得 这 个 选项 不 够 用 ， 也 可 以 设置 CURLOPT_DEBUGFUNCTION 来 调试 你 的 数据 。 


在 数据 传输 结束 之 后 ， 要 调用 curl_easy_cleanup 函 数 ， 用 来 清理 curl_global init 所 初始 化 的 资源 ， 和 curl_global init 函 数 一 样 ， 它 也 只 调用 一 次 。 
2.cURL 的 使 用 实例 
cURL 的 使 用 实例 见 代 码 清单 9-5， 该 段 代 码 出 自 tests 项 目的 CurlTest 文 件 夹 下 的 CurlTest.cpp 文 件 中 的 ccTouchesEnded 函 数 。 


代码 清单 9-5 ”cURL 的 使 用 实例 


void CurlTest::onTouchesEnded (const std::vector<Touch*>& touches, Event  *event) 


CURL *curl; 
CURLcode res; 
char buffer[10]; 


/ 
初始 化 
curl = curl easy init(); 
if (curl и 
{ 
curl easy setopt(curl, CURLOPT URL, "google.com"); 
res = curl easy perform (curl); 
// 
清除 
curl easy cleanup (curl); 
if (res == 
 label-»setString("O response"); 
else 
{ 
sprintf (buffer,"code: $i",res); 
 label-»setString (buffer); 
} 
} 
else 


 label-»setString("no curl"); 


} 


这 是 一 个 使 用 curl easy init, curl easy setopt, curl easy_perform 和 curl_ easy_cleanup 的 过 程 ， 当 网 络 连 接 正常 时 ， 运 行 结果 如 图 9-3 所 示 。 


当 断 开 网 络 连接 时 ， 运 行 结果 如 图 9-4 所 示 。 


Curl Test 


Curl Test 


9.3.2 HttpClient 类 


目前 的 手机 游戏 中 ， 使 用 HTTP 协 议 的 占据 很 大 部 分 ，HTTP ( 超 文 本 传输 协议 ) 是 一 种 详细 规定 了 浏览 器 和 万 维 网 服务 器 之 间 互 相通 信 的 规则 ， 通 过 因特网 传送 万 维 网 文档 的 数据 传送 协议 ， 就 是 通常 
说 的 短 连接 。 


HTTP 协 议 在 Cocos2D-X 中 通过 HttpClient 实 现 ， 这 也 是 Cocos2D-X 中 最 常用 的 网 络 模块 ， 使 用 的 方法 见 代 码 清单 9-6。 


代码 清单 9-6 ”HttpClient 的 使 用 


HttpRequest* request = new HttpRequest (); 

/ / 

链接 地 址 

request-»setUrl("http:// just-make-this-request-failed.com"); 
// 

链接 类 型 

request-»setRequestType (HttpRequest::Type: : GET) ; 

// 

链接 回调 

request-»setResponseCallback (this, 

httpresponse selector (HttpClientTest::onHttpRequestCompleteg)); 
request-»setTag ("СЕТ test1"); 


HttpClient::getInstance () ->ѕепа (request); 
24 
释放 


request-»release(); 


首先 创建 一 个 请 求 HttpRequest， 可 以 支持 不 同 的 请 求 方式 ， 具 体 的 请 求 方式 选择 与 URL 地 址 和 项 目 对 应 的 服务 器 实现 方式 相关 ， 然 后 通过 HttpClient 发 送 ， 接 收回 调 函 数 的 具体 实现 见 代 码 清单 9-7。 


代码 清单 9-7 接受 回调 函数 


void HttpClientTest::onHttpRequestCompleted(HttpClient *sender, HttpResponse *response) 
{ 


if (!response) 
{ 
return; 
} 
if (0 != strlen(response-»getHttpRequest () -^»getTag () )) 
{ 


log("$s completed", response-»getHttpRequest () -»getTag ()); 
} 


// 
获得 状态 码 
int statusCode = response-»getResponseCode(); 
char statusString[64] = {}; 
// 
打印 状态 码 


sprintf(statusString, "HTTP Status Code: $d, tag = $s", statusCode, 
response-»getHttpRequest () -»getTag () ) ; 
 labelStatusCode-»setString (statusString); 

ле code: $d", statusCode); 


вна 


if (!response-»isSucceed()) 
{ 


log("response failed"); 
log ("error buffer: $s", response-»getErrorBuffer()); 
return; 


} 
// 
获得 数据 


std::vector«char» *buffer = response-»getResponseData (); 
printf("Http Test, dump data: "); 
for (unsigned int i = 0; i < buffer-»5size(); i++) 


i 


} 
printf ("Nn"); 


printf("$c", (*buffer)[i]); 


可 以 通过 之 前 设置 的 标签 Tag 来 区 分 不 同 的 请 求 ， 实 际 游戏 中 ， 还 要 根据 策划 的 需求 来 设置 一 段 时 间 无 回复 时 的 回调 。 


9.3.3 Socket% 


Cocos2D-X 中 支持 两 种 Socket 协 议 SocketIO 和 WebSocket， 长 连接 是 链接 一 旦 建立 就 可 以 传递 信息 ， 一 般 用 于 大 型 角色 扮演 游戏 ，SocketIO 的 使 用 方法 见 代 码 清单 9-8。 


代码 清单 9-8 SocketIO 的 使 用 方法 


 SioClient = SocketIO: :connect (*this, "ws:// channon.us:3000"); 
_sioClient->setTag ("Test Client"); 
sioClient->on ("testevent", 


СС CALLBACK . 2 (SocketIOTestLayer::testevent, this)); 
_sioClient->on ("echotest", 
CC CALLBACK 2 (SocketIOTestLayer::echotest, this)); 


链接 建立 后 就 可 以 传递 信息 了 ， 传 递 信息 的 方法 见 代 码 清单 9-9。 


代码 清单 9-9 ”链接 建立 后 传递 信息 


SioClient-»send("Hello Socket.IO!");// 
传递 信息 
sioClient-»disconnect ();// 


不 需要 时 关闭 


Websocket 的 使 用 方式 和 Socket1IO 类 似 ， 也 是 先 建立 链接 ， 建 立 链接 的 方法 见 代 码 清单 9-10。 


代码 清单 9-10 “建立 WebSocket 链 接 


wsiSendText = new network::WebSocket (); 
if (! wsiSendText-»init(*this, "ws:// echo.websocket.org")) 


CC SAFE DELETE( wsiSendText); 


建立 链接 后 可 以 传递 信息 ， 不 需要 这 个 链接 时 可 以 关闭 。 天 闭 连接 的 方法 见 代 码 清单 9-11。 


代码 清单 9-11 链接 建立 后 传递 信息 


// 
传递 信息 


wsiSendText->send ("Hello WebSocket, I'm a text message."); 


关闭 链接 
/ 


wsiSendText-»close(); 


关闭 链接 


94 本章 小 结 


本 章 介绍 Cocos2D-X 中 的 声音 、 游 戏 存档 和 网 络 ， 这 些 昌 然 只 是 组 成 游戏 的 配角 ， 但 是 对 于 一 款 出 色 的 游戏 来 说 ， 也 非常 关键 。 其 中 Cocos2D-X 的 声音 部 分 使 用 CocosDenshion 的 
SimpleAudioEngine， 这 点 和 Cocos2D-iPhone 略 有 不 同 ， 游 戏 存 档 使 用 UserDefault 类 。 在 网 络 部 分 ， 本 章 介 绍 Cocos2D-X 支 持 的 网 络 类 库 的 使 用 。 下 章 介绍 物理 引擎 在 Cocos2D-X 中 的 使 用 。 


第 10 章 ”Cocos2D-X 中 的 物理 引 


[a 
== 


游戏 中 有 很 多 模拟 现实 的 部 分 ， 这 些 模拟 可 以 使 玩家 的 感觉 更 真实 。 昌 然 不 是 对 所 有 游戏 来 说 都 必须 使 用 物理 引擎 ， 但 当 我 们 需要 大 量 模拟 碰撞 和 自由 落体 运动 时 ， 选 择 物理 引擎 来 开发 无 疑 会 事 半 功 
倍 。 智 能 机 平台 游戏 中 愤怒 的 小 鸟 等 大 红 大 紫 的 游戏 都 采用 了 物理 引擎 进行 开发 。Cocos2D-X 支 持 Box2D 和 Chipmunk 两 种 物理 引擎 ， 本 章 就 介绍 物理 引擎 的 基本 概念 和 Cocos2D-X 中 这 两 种 物理 引擎 的 使 
用 。 


10.1 物理 3 


[ara 
EE 


在 使 用 物理 引擎 的 游戏 中 ， 可 以 把 物理 引擎 理解 为 控制 整个 游戏 中 精灵 移动 的 逻辑 控制 模块 ， 通 过 定义 不 同 节点 在 物理 效果 中 扮演 的 不 同 角色 来 控制 所 有 节点 的 碰撞 和 移动 轨迹 ， 本 节 就 来 介绍 基本 的 
物理 引擎 概念 。 


10.1.1 物理 引擎 简介 


游戏 世界 的 很 多 运动 规律 都 是 模拟 现实 的 ， 尽 管 有 些 游戏 在 现实 的 基础 上 有 所 创新 ， 但 是 更 多 的 时 候 要 给 玩家 以 真实 的 感觉 ， 这 非常 重要 。 在 不 使 用 物理 引擎 的 时 候 ， 我 们 可 以 通过 自己 的 算法 来 计算 
物体 的 运动 规律 ， 这 种 方式 不 仅 降低 了 开发 效率 ， 而 且 在 运行 效果 上 也 得 不 到 整体 的 优化 。 于 是 大 家 把 游戏 中 模拟 物理 的 算法 都 提取 总 结 出 来 ， 形 成 了 “物理 引擎 ”。 物 理 引擎 通过 为 刚性 物体 赋予 真实 的 
物理 属性 来 计算 运动 、 旋 转 和 碰撞 反应 。 物 理 引擎 使 用 对 象 属性 动量、 扭矩 或 者 弹性 ) 来 模拟 刚体 行为 。 好 的 物理 引擎 允许 有 复杂 的 机 械 装 置 ， 像 球形 关节 、 轮 子 、 气 缸 或 者 贸 链 。 有 些 也 支持 非 刚性 体 
的 物理 属性 ， 比 如 流体 。 


尽管 物理 引擎 的 功能 很 强大 ， 但 是 它 也 有 它 的 局 限 性 ， 在 模拟 现实 世界 相关 运动 效果 时 ， 它 并 不 是 完全 模拟 ， 因 为 那样 消耗 运算 量 是 很 大 的 ， 而 是 采取 一 些 “ 捷 径 ” 来 模拟 现实 的 运行 效果 。 比 如 ， 当 
物体 运动 的 步 长 (速度 ) 超过 它 自 己 本 身 的 效果 时 ， 会 发 生物 体 互相 穿 透 的 效果 ， 所 以 需要 控制 物体 的 移动 速度 来 避免 这 种 穿越 现象 的 发 生 。 


10.1.2 ”物理 引擎 的 作用 


物理 引擎 在 很 多 游戏 中 都 起 着 很 重要 的 作用 ， 然 而 ， 并 不 是 所 有 游戏 都 需要 物理 引擎 ， 当 需要 模拟 的 效果 和 物理 现象 并 不 一 完全 一 致 或 者 需要 物理 模拟 的 地 方 并 不 是 很 多 的 时 候 ， 应 该 选择 自己 设计 算 
法 来 实现 响应 的 效果 ， 那 么 物理 引擎 都 有 什么 作用 呢 ? 


* 真实 的 物理 世界 的 模拟 。 以 牛顿 力学 为 基础 而 模拟 出 的 物理 效果 。 这 样 有 两 个 好 处 ， 首 先是 精灵 的 运动 会 更 加 真实 ， 包 括 精 灵 间 的 相互 碰撞 、 自 由 落体 等 ， 然 后 就 是 可 以 增加 操作 的 随机 性 ， 从 而 提 


高 游 戏 性 o 


* 整体 的 处 理 碰撞 机 制 。 虽 然 绝 大 部 分 碰撞 的 逻辑 可 以 完全 不 依赖 物理 引擎 来 自己 实现 ， 但 是 如 果 一 个 游戏 需要 频繁 地 处 理 大量 碰 撞 时 ， 物 理 引 擎 绝对 是 第 一 选择 ， 因 为 物理 引擎 可 以 系统 化 地 处 理 碰 
接 ， 并 且 可 以 处 理 较为 复杂 的 情况 。 


` 关节 与 连接 的 模拟 。 以 著名 游戏 “愤怒 的 小 鸟 ”为 例 ， 游 戏 不 仅 要 处 理 大 量 的 碰撞 ， 还 要 处 理 需要 攻击 目标 (建筑 物 ) 之 间 的 连接 效果 等 ， 这 时 候 用 物理 引擎 来 帮助 实现 不 仅 可 以 加 快 开发 速度 ， 同 
时 系统 化 的 处 理 还 可 以 提高 程序 的 运行 效果 。 


| 优化 的 性 能 。 物 理 引 擎 对 模拟 物理 效果 的 算法 进行 了 优化 ， 这 些 代 码 都 是 经 历 过 很 多 次 推 殴 的 ， 比 个 人 实现 的 算法 在 整体 的 性 能 上 要 高 。 
10.1.3 ”认识 Box2D 和 Chipmunk 


和 Cocos2D 引 擎 一样 ，Cocos2D-X 同 样 支持 Box2D 和 Chipmunk 这 两 个 二 维 的 物理 引擎， 那么 我 们 在 开发 中 如 何 选择 呢 ? 二 者 又 有 何 异 同 呢 ? 


chipmunk 是 Cocos2D 系 列 游戏 引 警 最早 引入 的 物理 引擎 ， 用 C 语 言 来 实现 ， 由 于 文档 较 少 ， 其 使 用 程度 并 没有 Box2D 广 泛 。Box2D 由 C++ 实现 ， 而 且 有 JavaScript 等 其 他 语言 的 实现 ， 在 Flash 网 页 动 
画 等 方面 应 用 也 比较 广泛 ， 因 此 大 多 数 开发 人 员 比 较 偏爱 Box2D。 单 纯 从 功能 上 来 说 ，Box2D 和 Chipmunk 并 没有 太 大 的 区 别 。 一 些微 小 的 区 别 ， 比 如 Box2D 针 对 快速 移动 的 物体 “穿越 ” 另 一 物体 有 着 特 
殊 的 检测 方式 。 除 非 你 对 某 种 功能 有 着 特殊 的 需求 ， 否 则 二 者 在 功能 上 没有 本 质 的 区 别 。 在 使 用 上 ， 由 于 二 者 实现 的 语言 不 同 ， 所 以 从 你 熟悉 的 语言 开始 会 相对 容易 一 些 ， 另 外 Chipmunk 有 不 错 的 
Objective-C 语 言 接 口 ， 这 对 苹果 系列 设备 的 开发 更 好 一 些 ， 尤 其 在 Cocos2D-iPhone 中 ， 因 此 ， 之 前 使 用 Cocos2D-iPhone 开 发 的 可 能 也 会 更 倾向 于 使 用 Chipmunk。 


10.2 Cocos2D-X 中 的 Box2D 


Box2D 是 用 C++ 编写 的 ， 开 发 者 是 Erin Catto， 他 从 2005 年 开始 就 在 著名 的 GDC (Game Developers Conference， 游 戏 开发 者 会 议 ) 上 作物 理 模拟 相关 的 演讲 。2007 年 9 月 ， 他 公布 了 Box2D 物 理 引 
擎 ，Box2D 以 其 出 色 的 物理 模拟 效果 和 开源 的 特性 得 到 了 开发 者 的 认同 。 从 那 以 后 ，Box2D 引 警 的 开发 就 十 分 活跃 。Box2D 的 各 种 实现 版 本 层出不穷 ， 包 括 用 于 Flash 网 页 游戏 的 版 本 。Box2D 和 手机 游戏 
的 结缘 可 以 说 是 从 Box2D 的 Java 版 本 出 现 开 始 的 ， 开 发 者 喜欢 在 Android 游 戏 开 发 时 集成 Box2D 来 帮助 开发 更 炫 的 游戏 效果 。 自 从 Box2D 集 成 到 Cocos2D 系 列 引擎 以 后 ，Box2D 和 手 游 的 联系 更 加 紧密 ， 本 


节 就 介绍 Cocos2D-X 中 的 Box2D 引 擎 的 使 用 。 


下 面 介绍 Box2D 引 警 中 的 重要 概念 ， 这 些 概念 是 构成 Box2D 世 界 的 基础 。 

НИК: 即 不 会 发 生 形变 的 物体 ， 它 的 任何 两 点 间 的 距离 是 不 变 的 。 

ØR: 依附 于 物体 的 二 维 的 形状 结构 ， 形 状 具有 摩擦 和 恢复 的 材料 属性 。 

` 约束 : 约束 就 是 限制 物体 自由 的 物理 链接 ， 在 二 维 中 ， 物 体 有 三 个 自由 度 ， 比 如 把 一 个 物体 固定 在 墙 上 ， 它 只 能 绕 着 固定 的 点 旋转 ， 失 去 了 两 个 自由 度 。 
` 接触 约束 : 自动 创建 的 约束 ， 防 止 刚体 穿 透 、 模 拟 摩擦 和 恢复 的 特殊 约束 ， 不 需要 手动 创建 。 

CX: 把 两 个 物体 国定 在 一 起 的 约束 ， 包 括 旋 转 、 距 离 和 核 柱 等 ， 关 节 可 以 支持 限制 和 马达 。 

. 关节 马达 : 一 个 关节 马达 依靠 自由 度 来 驱动 物体 ， 比 如 可 以 使 用 马达 来 驱动 旋转 。 

` 关节 限制 : 限制 关节 的 运动 范围 ， 如 同 我 们 的 骨骼 一 样 。 


世界: 物体 、 形 状 和 约束 互相 作用 形成 的 世界 ， 允 许 创 建 多 个 世界 。 


Box2D 物 理 引擎 的 使 用 步骤 如 下 ， 同 时 也 是 大 多 数 物理 引 警 所 采用 的 方式 。 
1) 创建 一 个 世界 ， 同 时 设置 它 的 参数 。 

2) 创建 刚体 地 面 ， 定 义 一 个 形状 ， 把 它 绑 定 在 刚体 上 。 

3) 创建 世界 中 的 其 他 刚体 和 约束 等 。 

Д) 在 游戏 的 逻辑 循环 中 加 入 物理 引擎 的 世界 更 新 国 数 。 


整个 过 程 很 清晰 ， 主 要 的 目的 就 是 将 负责 演 染 的 Cocos2D-X 引 警部 分 和 负责 物理 逻辑 的 Box2D 部 分 结合 在 一 起 ， 这 也 是 在 其 他 平台 上 使 用 Box2D 时 需要 做 的 事情 ， 其 中 的 创建 刚体 、 约 束 和 关节 等 是 最 
关键 的 部 分 ， 也 是 和 泻 染 的 Cocos2D-X 引 警部 分 结合 的 关键 之 一 。 


在 Cocos2D-X 中 使 用 Box2D， 主 要 是 将 Cocos2D-X 中 负责 演 染 的 节点 类 对 象 和 Box2D 中 负责 物理 模拟 的 对 象 “ 绑 定 ” 在 一 起 ， 实 现 逻 辑 和 演 染 的 模拟 。Box2D 相 比 于 Chipmunk 物 理 引 警 的 一 大 优势 就 
是 它 完善 的 文档 ， 可 以 从 网 上 “(http://www.box2d.org/manual.html 上 下 载 Box2D 的 文档 ) 作为 一 个 开源 项 目 ， 也 可 以 登录 Box2D 的 官网 下 载 相关 资料 或 者 进行 捐款 ， 下 面 就 让 我 们 进入 Box2D 的 世界 。 
在 Xcode 下 新 建 一 个 项 目 ， 将 项 目下 的 CC_ENABLE BOX2D INTEGRATION 置 为 1， 运 行 效果 如 图 10-1 所 示 。 


在 该 项 目 中 ， 点 击 屏幕 可 以 产生 新 的 小 物体 块 ， 这 些小 物体 块 之 间 有 碰撞 的 关系 ， 也 体现 了 Box2D 的 模拟 物理 运动 的 功能 。 


标准 地 采用 Box2D 引 警 的 项 目 都 是 由 新 建 一 个 新 的 世界 开始 的 ， 这 是 一 个 管理 内 存 对 象 和 模拟 的 中 心 。 


Tap screen 
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图 10-1 Xcode 下 新 建 Box2D 项 目的 运行 效果 


要 创建 世界 对 象 ， 首 先 定 义 整 个 世界 的 重力 系统 ， 包 括 设 置 重力 大 小 和 方向 、 方 向 符合 基本 坐标 轴 方 向 ， 定 义 完 重力 后 ， 便 可 以 以 重力 为 参数 定义 世界 。 创 建物 理 世界 的 方法 见 代码 清单 10-1， 这 段 代 
码 出 自 tests 项 目 中 的 Box2Dtest 文 件 夹 或 者 Xcode 新 建 Box2D 项 目的 模板 工程 。 


代码 清单 10-1 定义 重力 新 建 世界 


b2Vec2 gravity; 
gravity.Set(0.0f, -10.0#); 
world = new b2World (gravity); 


之 后 便 是 设置 是 否 允 许 世 界 中 的 刚体 休眠 的 参数 。 休 有 眠 是 在 物理 引擎 中 的 一 种 技巧 ， 它 允许 系统 模拟 时 跳 过 某 些 不 需要 处 理 的 刚体 ， 当 施加 到 某 一 物体 上 的 力 小 于 临界 值 一 段 时 间 后 ， 这 个 刚体 会 进 
休眠 状态 ， 换 句 话说 ， 某 个 刚体 在 不 动 一 段 时 间 后 ， 会 自动 休眠 ， 不 再 对 它 进 行 计算 ,这样 可 以 达到 提高 引擎 效率 的 结果 ， 见 代码 清单 10-2。 


代码 清单 10-2 设置 是 否 允 许 和 是 否 持 续 的 物理 模拟 


world->SetAllowSleeping (true); 
world->SetContinuousPhysics (true); 


创建 物理 世界 ， 如 同 创建 一 个 “容器 ” 一样， 其 中 装载 着 我 们 需要 物理 模拟 的 对 象 ， 这 些 对 象 会 “填充 ”到 世界 中 。 


З.В 


下 一 步 创 建 包 围 盒 ， 包 围 盒 也 是 一 个 物体 。 物 体 即 刚体 ， 是 物理 学 中 的 质点 ， 只 有 位 置 ， 没 有 大 小 ， 它 又 可 以 区 分 为 以 下 几 类 
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. 静态 刚体 : 没有 质量 ， 没 有 速度 ， 只 可 以 手动 来 改变 他 的 位 置 ; 


` 棱柱 刚体 : 没有 质量 ， 但 是 可 以 有 速度 ， 可 以 自己 更 新 位 置 ; 


动态 刚体 : 有 质量 也 有 速度 。 


物理 引擎 需要 首先 定义 一 个 描述 类 ， 然 后 根据 描述 类 通过 世界 创建 某 个 对 象 。 创 建 刚体 时 需要 有 两 个 步骤 ， 一 是 生成 一 个 刚体 定义 ， 二 是 根据 刚体 定义 生成 刚体 。 在 刚体 创建 时 定义 中 的 信息 会 被 复 
制 ， 也 就 是 说 ， 创 建 完成 后 刚体 只 要 没 被 释放 掉 ， 就 还 可 以 重复 使 用 。 


通常 在 Box2D 引 擎 中 新 建 一 个 物体 需要 经 历 如 下 步骤 
1) 使 用 位 置 和 阻尼 等 参数 定义 物体 。 
2) 使 用 世界 对 象 创 建物 体 。 
3) 使 用 几何 结构 、 摩 擦 和 密度 等 参数 定义 对 象 。 
4) 调整 物体 质量 与 形状 相 匹 配 。 


首先 定义 物体 ， 见 代码 清单 10-3。 


代码 清单 10-3 ”定义 物体 


b2BodyDef groundBodyDef; 
groundBodyDef.position.Set(0, 0); 


即 定义 b2BodyDef 结 构 ， 它 作为 创建 物体 的 参数 将 被 传 入 物体 创建 中 ， 见 代码 清单 10-4。 


代码 清单 10-4 ”创建 物体 


b2Body* groundBody = world-»CreateBody (&groundBodyDef); 


之 后 是 定义 物体 边界 ， 见 代码 清单 10-5。 


代码 清单 10-5 ”定义 物体 边界 


b2EdgeShape groundBox; 

// 

包围 圈 底 部 

groundBox.Set (b2Vec2 (VisibleRect::1leftBottom() .x/PIM RATIO, 
VisibleRect::leftBottom().y/PTM RATIO), 
b2Vec2 (VisibleRect::rightBottom() .x/PTM RATIO, 
VisibleRect::rightBottom().y/PTM RATIO)); 
groundBody-»CreateFixture (&groundBox, 0) ; 


包围 圈 顶 部 

groundBox, Set (D2Vec2 (VisibleRect::;leftTop().x/PTM RATIO, 
VisibleRect::leftTop().y/PTM RATIO), 
b2Vec2 (VisibleRect::rightTop() .x/PIM RATIO, 
VisibleRect::rightTop().y/PTM КАТІО)); 
groundBody-»CreateFixture (&groundBox, 0) ; 


包围 圈 左 边 

groundBox. Set (b2Vec2 (VisibleRect: :leftTop().x/PTM RATIO, 

ibleRect::le рч y/PTM RATIO), 

b2Vec2 (VisibleRe ect::leftBottom() .x/PTIM | RATIO, 
e 


VisibleRect:: leftBottom() . y/PTM : RATIO)); 
groundBody-»CreateFixture (&groundBox, 0) ; 
// 

包围 圈 右 边 


groundBox.Set (b2Vec2 (VisibleRect::rightBottom() .x/PTM RATIO, 
ibleRect::rightBottom().y/PTM RATIO), Е 
b2Vec2 (VisibleRect::rightTop().x/PTM RATIO, 
ibleRect::rightTop().y/PTM RATIO)) ; 
groundBody-»CreateFixture (&groundBox, 0) ; 


先 分 别 定 义 四 条 边 ， 最 后 把 它 定 义 到 物体 中 。 这 里 需要 说 明 的 是 ， 和 物体 定义 一 样 ， 它 只 是 把 数据 复制 到 物体 中 ， 这 个 形状 的 定义 可 以 重新 被 使 用 ， 定 义 的 形状 和 物体 必须 绑 定 在 一 起 ， 形 状 才 有 意 


义 ， 也 融 是 说 形状 是 依附 于 物体 存在 的 。 


另外 定义 这 个 包围 盒 也 有 助 于 我 们 把 “世界 ”内 的 所 有 物体 的 移动 学 围 都 控制 在 屏幕 范围 内 ， 更 有 助 于 我 们 管理 这 些 对 象 。 这 里 也 说 明了 一 点 ， 这 个 类 似 于 世界 包围 盒 的 物体 将 不 依赖 于 Cocos2D-X 泻 
染 中 的 任何 贴图 和 形状 。 也 就 是 说 ， 这 样 做 是 可 以 的 ， 天 键 看 在 什么 场合 上 来 使 用 这 种 方式 。 


也 许 你 会 疑惑 ， 为 什么 要 分 别 定 义 四 条 边 ， 而 不 是 一 次 性 使 用 setAsBox 等 函数 直接 设置 物体 的 四 条 边 围 成 矩形 形状 呢 ? 因为 这 时 需要 一 个 空心 的 刚体 ， 否 则 使 用 setAsBox 等 函数 创建 的 世界 会 是 实心 


的 ， 这 样 在 “世界 ”中 创建 物体 便 会 出 现 问题 。 因 此 四 条 边 要 分 别 创建 ， 四 条 边 便 包 围 了 一 个 “空心 ”的 世界 。 


- 


需要 说 明 的 还 有 PTM_RATIO 变 量 ， 这 是 一 个 长 度 转换 的 变量 ， 由 于 Box2D 采 取现 实 世 界 的 “ 米 ” 作 为 计量 长 度 的 单位 (采取 千克 作为 重量 单位 ， 采 用 秒 作为 时 间 单位 ) 。 因 为 Box2D 采 用 浮 点 
数 ， 很 多 时 候 都 要 使 用 公差 来 保证 其 正常 工作 ， 因 为 这 些 公差 公式 已 经 被 调整 ， 以 适合 “ 米 - 干 克 - 秒 ” (MKS) 。 昌 然 作为 一 个 游戏 引擎 ， 以 像素 为 单位 更 加 方便 使 用 ， 但 是 ， 那 样 会 产生 一 些 不 好 的 模拟 
效果 。 注 意 ， 长 度 范围 在 0.1~10m 范 围 内 的 物体 模拟 效果 更 好 ， 由 于 Box2D 对 于 这 个 长 度 范围 做 了 优化 ， 使 得 小 到 色 头 盒 ， 大 到 公共 汽车 都 会 得 到 很 好 模拟 ， 所 以 要 把 游戏 中 像素 级 的 长 度 单 位 转换 为 米 的 
单位 ， 就 要 除 以 PTM_RATIO (定义 32 像 素 为 Im) 。 


注意 尽量 将 物体 的 长 度 定义 在 lm 左右 ， 当 然 ， 也 可 以 定义 长 度 范围 在 0.1~10m 范 围 以 外 的 物体 ， 不 过 可 能 会 产生 一 些 意料 之 外 的 物理 模拟 。 


下 面 就 是 定义 小 盒子 动态 刚体 的 部 分 了 ， 这 里 不 仪 需要 定义 Box2D 中 的 内 容 ， 还 要 把 这 些 逻 辑 数据 和 泻 染 部 分 结合 ， 具 体 如 何 结合 物理 逻辑 和 泻 染 部 分 见 代码 清单 10-6， 这 段 代 码 出 自 tests 项 目 中 的 
Box2Dtest 文 件 夹 或 者 Xcode 新 建 Box2D 项 目的 模板 工程 。 


代码 清单 10-6 ”创建 动态 刚体 


void Box2DTestLayer: :addNewSpriteAtPosition (Point p) 
{ 


CCLOG("Add sprite $0.2f x $02.f",p.x,p.y); 
// 


定义 世界 
b2BodyDef bodyDef; 
bodyDef.type = b2 dynamicBody; 
bodyDef.position.Set (p.x/PTM RATIO, p.y/PTM RATIO); 
b2Body *body = world-»CreateBody (&bodyDef); 


"F4 

设置 包围 盒 
b2PolygonShape dynamicBox; 
dynamicBox.SetAsBox(.5f, .5f); 
// 

定义 边缘 
b2FixtureDef fixtureDef; 


FfixtureDef.shape = on вн; 
tixtureDef.density = Of 
fixtureDef.friction = 0.3f; 
body-»CreateFixture (&fixtureDef); 

#if CC ENABLE BOX2D INTEGRATION 

auto parent = this-»getChildByTag (kTagParentNode); 


// 
随机 选择 图 片 位 置 
int idx = (CCRANDOM 0 1() > 
int idy = (CCRANDOM 0 1() > 1); 
auto sprite = PhysicsSprite::creat WithTextur ( 
 SpriteTexture,Rect(32 * idx,32 * idy,32,32)); 
рагепі->ааасћі1а (sprite); 
Sprite-»setB2Body (роду) ; 
Sprite-»setPT Ratio (РТМ RATIO); 
Sprite-»5setPosition( Point( р.х, р.у) ); 
fendif 
} 


? 0: 1); 
2- Os 
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接 下 来 需要 在 初始 化 方法 里 调用 scheduleUpdate () 模拟 出 每 个 时 间 步 更 新 ， 并 在 update 中 进行 更 新 。Box2d 是 通过 定期 调用 step 来 更 新 动画 的 ，step 的 第 一 个 参数 是 时 间 步 ， 这 里 进行 了 修改 ， 
为 dt 会 不 同 ， 所 以 不 建议 用 dt 来 作为 时 间 步 ， 而 要 给 它 一 个 固定 的 时 间 步 才 不 会 显得 动画 时 快 时 慢 。 第 二 个 参数 是 速度 迭代 次 数 ， 推 荐 8 次 ， 超 过 10 次 的 基本 看 不 出 效果 的 提升 。 第 三 个 参数 是 位 置 迁 代 ， 
这 个 1 次 就 可 以 了 。 更 新 函数 的 使 用 见 代码 清单 10-7。 


代码 清单 10-7 ”时 间 步 更 新 


void Box2DTestLayer: :update (float dt) 
{ 


int velocityIterat ions = 8; 
int positionIterations = 1; 
world->Step (0.03, velocityIterations, positionIterations); 


Box2D 的 很 多 设计 决策 都 是 为 了 快速 有 效 地 使 用 内 存 ， 由 于 Box2D 经 常 要 处 理 有 很 多 “小 对 象 ” 的 情况 ， 这 些 “ 小 对 象 ” 的 特点 就 是 占 内 人 存 较 少 并 且 生 命 周 期 不 长 ， 如 果 每 个 小 对 象 都 采取 “使 用 时 新 
建 ， 不 使 用 时 销毁 ”， 那 么 内 存 中 会 有 很 多 碎片 ， 这 时 就 需要 一 个 分 配 管理 器 来 管理 这 些 “ 小 对 象 ”。Box2D 的 解决 方案 是 使 用 小 型 对 象 分 配器 ， 它 维护 了 许多 尺寸 不 定 的 可 增加 池 。 当 有 内 存 分 配 的 请 求 
时 ， 会 返回 最 匹配 的 内 存 ， 当 内 存 使 用 完成 后 ， 又 回 到 池 中 ， 这 样 就 碱 少 了 很 多 堆 流 量 ， 而 且 操 作 十 分 快速 ， 这 个 分 配 管理 器 就 是 世界 ， 我 们 通过 世界 创建 Box2D 中 的 其 他 元 素 ， 在 每 个 时 间 步 的 临时 变量 
使 用 栈 分 配器 来 解决 单 步 堆 分 配 。 这 样 在 删除 时 ， 只 需 删除 世界 就 可 以 删除 全 部 的 对 象 ， 布 景 层 的 析 构 函数 见 代 码 清单 10-8。 


代码 清单 10-8 ”删除 世界 对 象 


Box2DTestLayer: :~Box2DTestLayer () 
{ 


CC SAFE DELETE (world); 


} 


另外 更 加 详细 的 Box2D 例 子 ， 可 以 见 Box2DTestBed 代 码 。 


10.3 Cocos2D-X 中 的 Chipmunk 


Chipmunk 是 由 howling moon software 的 Scott Lebcke 开 发 ， 由 C 语 言 编 写 ， 项 目 网 站 在 http://code.google.com/p/chipmunk-physics/ 上 ,， 论坛 在 http://chipmunk-physics.net/forum/ 上 , 可 
以 通过 这 些 网 站 获得 相关 的 文档 帮助 。 


在 Cocos2D-X 中 使 用 Chipmunk 


在 Xcode 创建 的 Chipmunk 项 目 和 tests 项 目 中 的 ChipmunkAccelTouchTest 项 目 都 是 Cocos2D-X 使 用 Chipmunk3 引 | 擎 的 实例 ， 首 先 来 看 运行 效果 ， 如 图 10-2 所 示 。 


图 10-2 Cocos2D-X 中 使 用 Chipmunk 的 运行 实例 


Chipmunk 引 擎 的 运行 实例 ， 结 构 和 Box2D 的 类 似 ， 创 建 世界 的 代码 见 代码 清单 10-9。 


代码 清单 10-9 ”使 用 Chipmunk 引 掌 初始 化 物理 世界 空间 


// 
初始 化 物理 引擎 相关 内 容 
void ChipmunkTestLayer: :іпіЄРһуѕісѕ () 
{ 
#if CC ENABLE CHIPMUNK INTEGRATION 


// 
创建 控件 


_5расе = cpSpaceNew () ; 
 Space-»gravity = cpv(0, -100); 
// 


底部 
_ма115[0] = cpSegmentShapeNew(  space-»staticBody, 
сру (VisibleRect::leftBottom().x,VisibleRect::leftBottom().y), 
Le 


сру (VisibleRect::rightBottom().x, 
VisibleRect::rightBottom().y), 0.0£f); 
// 
EE 
_walls[1] = cpSegmentShapeNew( _space->staticBody, 
cpv (VisibleRect::leftTop().x, VisibleRect::leftTop().y), 
cpv(VisibleRect::rightTop().x, VisibleRect::rightTop().y), 0.0£f); 
"4 
左边 
_ма115[2] = cpSegmentShapeNew(  space-»staticBody, 
сру (VisibleRect::leftBottom().x,VisibleRect::leftBottom().y), 
cpv (VisibleRect::leftTop().x,VisibleRect::leftTop().y), 0.0£); 
// 
右边 
_ма115[3] = cpSegmentShapeNew(  space-»staticBody, 
cpv (VisibleRect::rightBottom().x, VisibleRect::rightBottom().y), 
cpv(VisibleRect::rightTop().x, VisibleRect::rightTop().y), 0.0#); 
for( int i=0;i<4;i++) { 
 walls[i]-»e = 1.0f; 
walls[i]-»u = 1.0f; 
cpSpaceAddStaticShape ( space,  walls[i] ); 
} 
// 
测试 使 用 
 debugLayer = PhysicsDebugNode::create( space); 
this-»addChild( debugLayer, Z PHYSICS DEBUG); 
fendif 


} 


和 Box2D 引 擎 的 使 用 类 似 ， 不 同 的 是 定义 空间 以 后 通过 设置 参数 来 设置 重力 ， 方 向 和 Box2D 一 致 ， 但 是 大 小 不 同 。 接 下 来 定义 并 添加 静态 形状 ， 包 围 屏幕 的 四 周 。 四 个 边 都 要 设置 e 和 u 属 性 ，e 是 回复 
力 ，U 是 摩擦 力 。 在 析 构 函数 中 也 要 删除 空间 ， 和 Box2D 的 世界 扮演 的 角色 类 似 ， 略 有 不 同 的 是 ， 之 前 定义 的 形状 也 要 释放 。 布 景 层 的 析 构 函数 见 代码 清单 10-10。 


代码 清单 10-10 ”释放 空间 


ChipmunkAccelTouchTestLayer::-ChipmunkAccelTouchTestLlayer () 


í 
MZ 
释放 


for( int i=0;i<4;i++) { 
cpShapeFree( m pWalls[i] ); 


cpSpaceFree( m pSpace ); 


和 Box2D 一 样 ， 也 是 用 addNewsSpriteAtPosition 函 数 来 创建 新 的 对 象 ， 


代码 清单 10-11 创建 新 的 对 象 


void ChipmunkTestLayer: 

{ 

#if CC ENABLE PMUNK _ 
int posx, posy; 
auto parent = getChildByTag (kTagParentNode); 


// 
随机 位 置 
posx 
posy 
posx 
posy 


:addNewSpriteAtPosition (Point pos) 


| CH 


NTEGRAT 


ON 


cpv (-2 


创建 身体 
cpBody *body = cpBodyNew (1.0 
verts,cpvzero)); 
body->p = cpv(pos.x, pos.y); 
cpSpaceAddBody ( space, body); 


f, cpMomentForPoly(1.0f, num, 


cpShape* ud c = cpPolyShapeNew (body, num, verts, cpvzero); 


shape->e = 0.5f; shape->u = 0.5f; 
cpSpaceAddShape (_space, shape); 
auto sprite = PhysicsSprite: 
Rect (posx, posy, 85, 121)); 
parent->addChild (sprite); 
sprite->setCPBody (Боду); 
sprite->setPosition (pos); 
#endif 


{Еирдатев а ПА B0B, update 


代码 清单 10-12 ”每 帧 逻辑 处 理 


void ChipmunkTestLayer::update (float delta) 
{ 


// 
根据 动画 间隔 设置 更 新 闻 陋 


int steps = 2; 


float dt = Director::getInstance()-»getAnimationInterval () 
/ (£1oat)steps; 
for(int 1=0; i«steps; i++ E 

cpSpaceStep( space, dt); 
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Bx2sPhysicsSprite 


Cocos2D-X 对 物理 引 警 部 分 做 了 几 处 改动 ， 其 实 这 种 改动 从 2.1 版 本 起 就 已 经 开始 了 ， 从 之 前 的 实例 就 可 以 看 出 来 。Cocos2D-X 引 车 


都 是 基于 节点 类 的 ， 一 般 带 贴图 的 都 是 精灵 类 ， 所 以 要 把 物理 引擎 的 逻辑 和 引擎 
它 继承 自 精 灵 类 ， 能 执行 精灵 类 可 执行 的 全 部 功能 ， 而 且 可 以 通 


setPTM Ratio 函 数 设置 量度 的 转换 。 


代码 清单 10-13 ” 绑 定 Box2D 


auto sprite = PhysicsSprite: 
parent- »addChild (sprite); 
sprite- >setB2Body (body) ; 
sprite->setPTMRatio (PTM RATIO) ; 
Sprite-»5setPosition( Point( р.х, р.у) ); 


为 精灵 绑 定 Chipmunk 刚 体 的 代码 见 代 码 清单 10-14。 


代码 清单 10-14” 绑 定 Chipmunk 刚 体 


auto sprite = PhysicsSprite: 
рагепі->ааасћі1а (sprite); 
Sprite-»setCPBody (роду); 
Sprite-»setPosition (pos); 


另外 还 有 一 个 节点 类 PhysicsDebugNode， 继 承 自 绘制 图 形 节 


代码 清单 10-15 ”创建 PhysicsDebugNode 节 点 


debugLayer = PhysicsDebugNode: 


E :create( space); 
this-»addChild( debugLayer, 


Z PHYSICS DEBUG); 


105 本章 小 结 


本 章 介 绍 了 Cocos2D-X 中 支持 的 两 个 物理 引擎 
语言 的 学 习 。 


: Box2D 和 Chipmunk, 分 


数 的 具体 实现 见 代 码 清单 10-12。 


:createWithTexture( spriteTexture,Rect (posx, posy, 


点 DrawNode， 用 来 绘 


addNewsSpriteAtPositionPZias 


:createWithTexture( spriteTexture, 


过 setCPBody 或 者 setBPBody 绑 定 物理 引擎 


具体 实现 见 代 码 清单 10-11。 


2 的 刚体 ， 并 进 


分 别 介绍 了 两 个 引擎 


| 物理 引擎 


:createWithTexture( spriteTexture,Rect(32 * idx,32 * idy,32,32)); 


85, 121)); 


的 Debug 测 试 框 ， 创 建 它 时 直接 传 入 世界 对 象 就 可 以 ， 


的 基本 概念 和 在 Cocos2D-X 中 使 用 的 实例 ， 学 习 本 章 要 注意 理解 两 个 物理 引擎 


警 和 两 个 物理 引擎 结合 得 并 不 好 ， 由 于 Cocos2D-X 中 所 有 显示 的 对 象 
的 演 染 结合 起 来 ， 那 么 就 需要 把 物理 引擎 中 的 刚体 和 Cocos2D-X 中 的 精灵 结合 起 来 ， 于 是 就 有 了 物理 精灵 类 PhysicsSprite， 
行 各 种 逻辑 判断 。 为 精灵 绑 定 Box2D 刚 体 见 代码 清单 10-13， 


需要 调用 


见 代码 清单 10-15。 


ЕҢ ЖЕ ДЫЛ; 下 一 章 开始 脚本 


: 第 11 章 “Cocos2D-X 中 的 脚本 语言 Lua 
第 12 章 Cocos2D-X 中 的 脚本 语言 JavaScript 


` 第 13 章 ”游戏 中 常用 算法 在 Cocos2D-X 中 的 实现 
ЖА 粒子 系统 
第 15 章 Cocos2D-XP ж 6,28 


: 第 16 章 ”Cocos2D-X 相 关 的 编辑 器 


第 11 章 ”Cocos2D-X 中 的 脚本 语言 一 一 Lua 


脚本 语言 又 被 称 为 动态 语言 ， 通 
是 


以 文本 保存 ， 只 在 被 调用 时 进行 解释 或 编译 。 是 为 了 缩短 传统 的 “编写 -编译 -链接 -运行 ”过 程 而 创建 的 计算 机 编程 语言 。 此 命名 起 源 于 一 个 脚本 “screenplay” ( 脚 
本 语言 文件 名 称 ) ， 该 脚本 的 功能 复 。 


常 
每 次 运行 都 会 使 对 话 框 逐 字 重 


早期 的 脚本 语言 称 为 批 处 理 语言 或 工作 控制 语言 ， 几 乎 在 系统 的 各 个 层次 都 可 以 看 到 脚本 语言 的 存在 。 一 个 脚本 通常 是 解释 运行 而 非 编译 。 脚 本 语言 通常 有 简单 、 易 学 、 易 用 的 特性 ， 目 的 就 是 让 程序 
员 快 速 完成 程序 的 编写 工作 。 由 于 游戏 开发 中 需要 策划 配置 很 多 数据 ， 甚 至 是 亲自 编写 某 些 技能 或 动画 的 工作 流程 ， 因 此 脚本 语言 的 这 种 “易学 、 易 用 ”特性 也 使 得 它 在 游戏 开发 中 被 广泛 使 用 ;另外 由 于 
脚本 引擎 是 边 解释 、 边 运行 ， 所 以 还 可 以 支持 动态 更 新 ， 相 信息 受过 苹果 漫长 审核 程序 的 你 一 定 明白 这 个 功能 对 于 快速 更 新 游戏 的 好 处 。 


Cocos2D-X 支 持 两 种 脚本 语言 : Lua 和 JavaScript。 和 其 他 语言 一 样 ， 程 序 员 热 衷 于 在 Cocos2D-X 社 区 里 进行 关于 这 两 种 语言 训 优 就 务 的 讨论 。 笔 者 认为 这 种 讨论 如 同 关 公 战 秦琼 ,没什么 意义 ,而且 
也 不 存在 哪 种 语言 一 定 胜 过 另 一 种 语言 。Lua 作 为 游戏 开发 中 的 “老牌 ”脚本 语言 更 加 成 熟 ，Cocos2D-X 对 于 Lua 脚 本 的 支持 也 更 早 ， 而 且 Lua 的 运行 效率 也 比 JavaScript 高 ; 另外 Lua 的 相关 工具 也 更 加 完 
善 ， 比 如 可 以 把 Lua 代 码 编译 为 字 节 码 再 打包 到 游戏 里 ， 避 免 游 戏 被 反 编 译 。JavaScript 是 近来 Cocos2D-X 引 擎 主推 的 一 种 方案 ， 由 于 JavaScript 可 以 直接 运行 在 网 页 中 ， 借 着 HTML5 的 东风 ，JavasScript 把 
Cocos2D3 引 警 运 行 到 了 网 页 平台 ， 从 Cocos2D-X 2.0 版 本 开始 推荐 编写 一 次 JavaScript 代 码 ， 就 可 以 横 跨 Android、iOS 和 网 页 这 三 个 主流 的 平台 。 综 上 所 述 ， 使 用 哪 种 脚本 语言 ， 或 者 使 不 使 用 脚本 语言 都 
是 根据 需要 而 定 ， 没 有 放 之 四 海 而 皆 准 的 解决 方案 。 


本 章 和 下 一 章 分 别 介 绍 Lua 和 Javascript， 在 充分 了 解 这 两 种 语言 后 ， 根 据 开 发 需要 来 选择 适合 的 脚本 语言 。 本 章 首先 概要 介绍 Lua 及 其 语法 以 及 面向 对 象 方法 ， 然 后 介绍 Lua 和 Cocos2D-X5 引 警 的 结合 
方式 ， 最 后 介绍 Cocos2D-X 的 Lua 扩 展 Quick-Cocos2D-X 以 及 如 何 构 建 自 己 的 Cocos2D-X+Lua 框 架 。 


11.1 Lua 基 本 介绍 


Lua 是 一 个 小 巧 的 脚本 语言 ， 由 巴西 里 约 热 内 卢 天 主教 大 学 里 的 一 个 研发 小 组 于 1993 年 设计 开发 ， 其 最 初 的 设计 目的 是 嵌入 应 用 程序 中 ， 从 而 为 应 用 程序 提供 灵活 的 扩展 和 定制 功能 。Lua 由 标准 C 编 写 
而 成 ， 几 乎 在 所 有 操作 系统 和 平台 上 都 可 以 编译 和 运行 。Lua 并 没有 提供 强大 的 库 ， 这 是 由 它 的 定位 决定 的 。 所 以 Lua 不 适合 作为 开发 独立 应 用 程序 的 语言 。Lua 有 一 个 同时 进行 的 JIT 项 目 ， 提 供 在 特定 平台 
上 的 即时 编译 功能 。 


Lua 具 有 轻 量 性 和 可 扩展 性 等 特性 ， 一 个 完整 的 Lua 解 释 器 不 过 200kB， 在 目前 所 有 脚本 引擎 中 ，Lua 的 速度 是 最 快 的 。 另 外 ， 可 扩展 的 Lua 语 言 并 不 像 其 他 “大 而 全 ”的 语言 那样 包括 很 多 功能 ， 比 如 网 
络 通 信 、 图 形 界面 等 。 但 是 Lua 提 供 了 非常 易于 使 用 的 扩展 接口 和 机 制 ， 这 使 得 宿主 语言 (通常 是 C 或 C++) 可 以 提供 这 些 功能 ，Lua 语 言 可 以 调用 相应 接口 来 使 用 这 些 功能 ， 就 像 内 置 的 功能 一 样 。 另 
外 ，Lua 还 支持 面向 过 程 编 程 、 面 向 对 象 编程 和 遂 数 式 语言 编程 ， 并 且 支 持 内 存 自动 管理 功能 。 


了 解 一 门 脚本 语言 的 顺序 和 学 习 其 他 编程 语言 是 一 样 的 ， 首 先 了 解 内 置 类 型 (学习 单 词 )， 然 后 了 解 控 制 结构 和 内 置 存 储 结构 (学 习 语 法 ) ， 最 后 学 习 它 的 相关 消 数 接口 (学习 方言 和 介 语 ) 。 其 实 当 
你 掌握 一 门 编程 语言 以 后 ， 学 习 其 他 的 编程 语言 已 经 不 是 难事 。 


11.1.1 Lua 的 变量 及 内 置 类 型 


Lua 和 下 一 章 将 要 学 习 的 JavaScript 一 样 ， 是 一 门 “ 弱 类 型 ” (也 称 做 “ 非 类 型 ” (untype) ) 的 语言 。“ 弱 类 型 ”就 是 一 个 变量 可 以 存放 任何 类 型 的 值 ， 可 以 先 把 一 个 整数 赋 给 它 ， 然 后 赋 给 它 一 个 
字符 串 甚至 是 一 个 国 数 ! 因此 ， 它 的 类 型 转换 比 C+ + 轻松 许多 。 
与 一 般 编 程 语言 一 样 ， 定 义 一 个 Lua 变 量 需 要 命名 一 个 标识 符 ， 标 识 符 同样 由 数字 、 字 母 和 下 划 线 组 成 ， 并 且 只 可 以 是 字母 或 者 下 划 线 开头 ， 另 外 注意 和 保留 字 区 分 。 


Lua 默 认 声 明 的 变量 是 全 局 的 ， 局 部 变量 需要 用 关键 字 “local” 修 饰 。 如 果 因 为 方便 把 大 部 分 变量 设计 成 全 局 变量 ， 会 造成 不 好 的 结果 。 首 先 ， 在 文件 没 被 做 任何 处 理 时 ， 这 样 设计 会 造成 污染 全 局 函 
数 ， 比 如 命名 一 个 函数 “type” ， 这 恰恰 是 一 个 全 局 函数 ， 当 想 调 用 这 个 函数 时 ， 调 到 的 始终 是 自己 命名 的 那个 国 数 ， 公 共 域 就 被 “污染 ”了 ， 所 以 最 好 的 办 法 是 在 每 个 “.Iua” 文 件 前 调 
FH "module (http://www.hzcourse.com/resource/readBook?pathz /openresources/teach ebook/uncompressed/14889/OEBPS/Text/.., package.seeall) ”， 把 这 个 文件 中 声明 的 所 有 全 局 变 
ш “打包 ”， 这 样 在 其 他 文件 调用 那个 文件 的 全 局 变量 时 ， 需 要 用 “文件 名 .变量 名 ”的 形式 ， 也 就 是 说 这 个 文件 中 的 全 局 变量 ， 其 实 只 是 这 一 个 文件 的 全 局 变量 。 如 果 的 确 需要 一 个 在 所 有 文件 中 都 是 全 局 
变量 的 变量 ， 最 好 把 它们 定义 在 一 个 文件 里 ， 而 且 命名 加 以 规范 限制 ， 比 如 使 用 项 目 名 作为 前 缀 ， 这 样 就 不 会 污染 公共 域 了 。 


Lua 中 的 内 置 类 型 如 表 11-1 所 示 。 


表 11-1 Lua 中 的 内 置 类 型 


+ Ж ж ж 
TRAE i АДЕ —1 ЛЕ р Жз, РВЕ У ЕТА НИВ ШЕ, 32 E 
| 个 table 置 空 也 是 释放 这 个 table 
Boolean Lua 中 只 认为 nil 和 false 为 假 ，0 和 空 字符 串 都 是 下 
Number 双 精 度 浮 点 数 ，Lua 中 没有 整数 
T 


| 
| 
String 字符 串 类 型 ， 具 体会 在 后 面 介绍 


» 


Nil 空 值 


| 
Table 可 以 当 数组 和 字典 来 使 用 ， 具 体会 在 后 面 介 绍 
Function 在 弱 类 型 语言 里 ， 困 数 也 是 一 个 类 型 
Userdata 可 以 将 C 数据 存放 在 Lua 变量 中 ，Userdata 在 Lua 中 除了 赋值 和 
Userdata 用 户 数据 | 相等 比较 外 没有 预定 义 的 操作 。Userdata 用 来 描述 应 用 程序 或 者 使 用 С 实现 
的 库 创 建 的 新 类 型 。 例 如 标准 IO 库 用 来 描述 文件 
Threads 区 别 独立 执行 的 线程 ， 用 来 实现 协同 例 程 


由 于 Lua 弱 类 型 的 特点 ， 类 型 间 的 转换 非常 容易 ， 比 如 字符 串 类 型 转换 成 数值 型 ， 只 需要 把 字符 串 类 型 的 变量 加 上 0 就 可 以 ， 反 之 亦 然 。 字 符 串 类 型 和 数值 类 型 的 转换 方法 见 代 码 清单 11-1。 


代码 清单 11-1 Lua 中 字符 串 类 型 和 数值 类 型 的 转换 


local m numtostr = ""http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/..m num 
数值 转换 成 字符 串 
local m strtonum = 0 + m str 


字符 串 转换 成 数值 


字符 串 类 型 有 一 个 特殊 的 操作 符 ， 即 “http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14889/OEBPS/VText/..”， 表 示 字 符 串 加 法 ， 其 他 字 
符 串 类 型 的 函数 见 表 11-2。 


表 11-2 Luat 85 FF P EE E 3 


名 HW ж ож 


string.len(s) 字符 串 长 度 

string.rep(s.n) 返回 重复 n KAY 5 FIP, И stingrep( “а” ,5) 返回 aaaaa 
string.lower(s) 将 字符 串 中 的 所 有 大 写字 母 转换 为 小 写 

string.upper(s) А РУЛА NT ЗЕБ ЕТЕ Ж AU 


返回 从 第 i 个 字符 到 第 j 个 字符 串 之 间 的 字符 串 〈 注 总 ，Lua 是 从 1 开始 计数 ， 而 不 是 从 0 
string.sub(s.1.]) 开始 ), j 也 可 以 是 负数 ， 如 果 是 负数 ， 那 么 是 从 字符 串 最 后 一 个 字符 往 前 数 j 个 字符 ，j 也 可 


string.char(v) 将 数值 类 型 转换 成 字符 串 ， 比 如 string.char(97) Жл: “а” 

string.byte(s) 字符 串 类 型 转换 为 数值 类 型 ， 比 如 string.char( “a” ) 就 是 97 

аа ааыа, 格式 化 字符 串 ， 如 string.format( “%e” ,1000) 输出 的 是 1.000000e+03 ， 即 科学 计数 法 表示 
string.find (s,f) 返回 字符 串 在 s 中 的 起 始 位 置 和 结束 位 置 ， 如 果 没 找到 则 返回 nil 


Lua 中 最 灵活 的 数据 结构 就 是 table， 它 相当 于 经 常 使 用 的 数组 和 字典 两 种 数据 结构 ， 声 明 一 个 table 需 要 在 声明 变量 时 将 它 赋值 “和 ”， 这 就 是 一 个 空 的 数据 表 ， 关 于 数据 表 的 定义 和 使 用 的 方法 见 代 码 
清单 11-2。 


代码 清单 11-2 table 类 型 的 声明 和 使 用 


local m tab = {} 


注意 ，m_tab["1] 和 m_tab[1] 是 不 同 的 两 个 索引 对 象 ， 虽 然 Lua 大 多 时 候 是 “忽略 ”类 型 ， 一 视 同仁 地 对 待 所 有 类 型 ， 但 是 这 里 字符 串 和 数值 是 不 一 样 的 ， 需 要 特别 注意 。table 中 的 相关 阔 数 介绍 见 表 
11-3。 


表 11-3 table 中 的 相关 有 函数 


table.concat(table.sep.start.end) 


table.insert(table.pos.value) 


table.maxn(table) 


table.remove(table.pos) 


table.sort(table.comp) 


table.foreachi(table,function(1.v)) 
table.foreach(table.function(1.v)) 
table.setn(table.nSize) 


table.getn(table) ЯП # 操作 稚 


tA 述 

Œ FJ Ер table ВУ JH concat, 25 [9] table 中 第 start л R #1] % end 个 无 
率 连 接 成 的 字符 串 ， 元 隶 间 用 sep FAREM, BRT table 外 ， 其 他 的 参 
数 都 不 是 必需 的 ， 分 隔 符 的 默认 值 是 空 字符 ，start 默认 值 是 1，end 的 
默认 值 是 数组 部 分 的 总 长 。 如 tab=f1，2，3}， 调 用 table.concat(tab) 后 返 
| “1237 

在 第 pos 的 位 置 上 插入 value 222, pos 参数 可 选 ， 默 认为 数组 部 分 末尾 

返回 指定 table key 值 中 最 大 的 key 值 。 如 果 不 存 在 key 值 为 

1Е #8762, Dui [nl 

删除 并 返回 table 数组 部 分 位 于 pos 位 置 的 元 素 ， 其 后 的 元 素 会 被 前 移 ， 
pos 参数 可 选 ， 默 认 最 后 一 个 元 素 的 位 置 

排序 了 水 数 ， 默 认 对 给 定 的 table 进行 升序 排序 ，comp 是 一 个 可 选 的 参数 ， 
此 参数 是 一 个 外 部 图 数 ， 可 以 用 来 目 定 义 sort 图 数 的 排序 标准 ， 但 是 当 使 用 
sort 图 数 时 需要 格外 注意 有 时 会 产生 报箱 ， 根 据 经 验 ， 你 编 与 的 comp РХ 
应 该 尽量 遵循 以 下 规范 : 

e 不 能 用 <=, ЖУ; 

М < 与 一 拆 分 的 时 候 ， 使 用 “一 ” (如果 是 最 后 一 个 站 语句 ) 必须 返回 false 

M 1 (数字 1) НАЈ 200 59590 , ЖЛ table a key 和 value Z£ XJ 3t 
fT function(i.v) 操作 

foreach 会 对 整个 表 进 行 运 代 ， 包 括 数值 索引 和 字符 串 索引 

设置 table 中 的 元 叉 个 效 ， 需 要 说 明 的 是 ， 知 道 有 这 个 因数 就 可 以 卫 ， 新 
版 本 中 已 经 不 开放 这 个 图 数 了 

和 maxn 功能 一 样 ， 也 就 是 说 无 法 返回 有 字符 串 过 3 引 的 table 的 个 数 


这 里 会 有 疑问 ， 如 果 我 们 使 用 字典 的 方式 将 无 法 获得 table 的 长 度 ， 进 而 无 法 遍历 整个 table，11.1.2 节 会 为 你 解释 这 个 问题 。 


11.1.2 ”Lua 的 操作 符 和 控制 结构 


有 了 基础 类 型 作为 材料 ， 还 需要 操作 符 和 控制 结构 作为 “辅料 ” 


е9 ~ 


Ф 
II 


Lua 使 用 “--” 作 为 单行 注释 ，“ 一 [[ ”和 “]]--” 作 为 多 行 注释 。 


Lua 不 支持 switch 控 制 结 构 ， 所 以 if-else 使 用 的 频率 非常 高 ， 和 其 


代码 清单 11-3 ”Lua 中 的 if-else 例 子 


，Lua 支 持 加 减 乘 除 ， 指 数 操作 “^” 和 求 模 操作 “%” 算 数 运 算 符 (注意 ，“++” 和 “--” 在 Lua 中 并 不 支持 ) ， 另 外 还 
"~=" (不 等 于 ) “<=” 和 和 “>=” 关系 运算 符 , 以 及 “and” (В) , "or' (或 ) 和 “not” ( 否 ) 等 逻辑 运算 符 。 


他 语言 中 的 if-else 略 有 不 同 ，Lua 中 的 if-else 需 要 有 end 结 尾 ，Lua 中 的 if-else 例 子 见 代码 清单 11-3。 


if m roundindex > 6 then 

backToPVE () 

elseif m roundTab[m roundindex] == nil then 
runBattleRound() 


else 
runClose|() 
end 


由 于 Lua 中 没有 "C 和“}”， 所 有 的 控制 结构 需要 end 结 尾 ， 用 以 区 分 多 行 控制 结构 。 需 要 注意 的 是 ， 和 大 括号 不 同 ， 即 使 只 有 一 行 ， 也 需要 使 用 end， 另 外 ， 以 往 的 “else if” 这 里 中 间 不 能 有 空 


格 ， 应 该 是 “elseif” , 


Lua 中 的 while 和 一 般 语言 差不多 ， 但 是 “do-while” 结构 Lua 中 不 使 用 while， 而 是 “repeat” ， 示 例 见 代码 清单 11-4。 


代码 清单 11-4 ”while 和 repeat 示 例 


local index = 1 
while index « 10 then 


print ("index-»"http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/..index) 


index = index + 1 


print ("index-»"http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/..index) 


index = index + 1 
until index > 0 


Lua 中 的 for 循 环 有 两 种 形式 ， 示 例 见 代 码 清单 11-5。 


代码 清单 11-5” Lua 中 的 for 循 环 


遍历 数组 型 表 ， 第 三 个 值 为 每 步 i 
增加 的 值 ， 默 认为 1 


for 1,10 do 


print("m tabStrKey-»"http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/0l 


end 
--Lua 
中 也 支持 break 
for r,10,2.do 


if i == 4 then 
break 
end 
end 


为 其 中 每 一 个 对 象 


end 


print("m tabStrKey-»"http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/0l 


for i,v in pairs(m tabStrKey) do 
print("m tabStrKey-»v-»"http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/0l 


EBPS/Text/..m tabStrKey[i]) 


EBPS/Text/..m tabStrKey[i]) 


EBPS/Text/..v) 


需要 注意 的 是 ，Lua 中 也 是 支持 break 的 ， 第 二 个 循环 就 是 使 用 break 跳 出 循环 。 


11.1.3 ”Lua 中 的 全 局 函数 


Lua 全 局 变量 中 有 个 math 类 ， 提 供 的 大 量 数学 函数 见 表 11-4。 


Р1 
Abs 
ceil 
floor 
max 


min 


pow (x, y) 


modf ШЛУ 
randomseed i EPB ULET 
random(x.y) 返回 x 到 y [н] ЕН. 
d ТГ 
deg a Pe ff JE 180 
asin acos atan Fz — fü PK ZR 
gc 
iogl0(3) TINE 
exp 


表 11-4 math #2 


fü Ж m H 


圆周 率 math.pi 
绝对 值 math.abs(-2) 
回 上 取 整 math.ceil(2.1) 


C2 


[n] КАХ math.floor(2.9) 2 
参数 中 的 最 大 值 math.max(l, 2, 3) 3 
参数 中 的 最 小 值 math.min(1, 2, 3) 1 
д In] x Ig у КЕ math.pow(2, 3) 8 


Lua 还 提供 了 I/O 类 ， 用 来 读 入 和 写 入 文件 ， 见 表 11-5。 


名 称 


i 为 “r” 度 模式 ， 可 以 修改 “w”( 写 模式 ) 和 “a”( 添 加 模式 ) 等 

write 写 入 文件 

read BEA XC, nA REIRA bius [n] nil 

close 
除了 math 类 和 IlMO 类 以 外 ，Lua 还 有 两 个 比较 有 用 的 函数 ， 一 个 是 type 返 回 一 个 对 象 的 类 型 ， 方 便 我 们 根据 类 型 做 不 同 的 处 理 ， 比 如 是 数值 就 进行 运 


名 思 义 就 是 打印 控制 台 输 出 。 


表 11-5 Lua 的 1/JO 类 
їн Ж 
打开 文件 ， 第 一 个 参数 是 文件 名 ， 第 二 个 参数 是 打开 方式 ， 默 认 


11.14 在 Lua 中 实现 面向 对 象 


算 


t! 


m H 
io.open( "game.config" ) 


io.write( "string" ) 


10.read() 
1o.flush() 
10.close() 
是 table 就 进行 遍历 等 ; 另外 一 个 就 是 print， 顾 


Lua 在 Cocos2D-X 中 一 般 被 用 作 界 面 的 逻辑 流程 开发 ， 但 是 Lua 其 实 也 是 可 以 支持 面向 对 象 开 发 的 ，Lua 中 的 table 就 是 一 种 对 象 ，table 中 可 以 存放 值 、 字 符 串 或 者 布尔 型 ， 不 仅 如 此 ，table 中 还 可 以 内 
套 table 或 者 是 存 入 函数 (在 Lua 中 ， 函 数 是 一 种 特殊 的 类 型 ) ， 所 以 ， 可 以 把 对 象 的 行为 和 数据 存储 在 一 个 table 里 面 ， 这 样 就 有 了 面向 对 象 的 概念 ， 但 是 ， 把 行为 和 数据 存 到 一 个 table 里 面 还 不 能 完全 解 
决 问题 ，table 不 可 复制 ， 一 个 table 只 能 表示 一 个 对 象 ， 这 时 就 需要 加 入 一 个 类 似 于 C++ 中 new 函 数 的 功能 ，new 函 数 的 具体 实现 见 代 码 清单 11-6。 


代码 清单 11-6 ”Lua 面 向 对 象 的 new 函数 


local object = {m data = 0} 


function object.new (self) 
local tab = {} 


setmetatable (tab, self) 
self. index - self 
return tab 


end 


首先 介绍 两 个 概念 “元 表 ” 和 “本 表 ”。 元 表 也 是 一 个 表 ， 也 叫 “原型 表 ”， 可 以 设置 给 一 个 本 表 。 一 个 表 作 为 元 表 概 念 存在 的 意义 在 于 ， 它 可 以 通过 定义 自身 的 一 系列 元 方法 来 改变 本 表 的 行为 。 另 
jh " index" 元 方法 : 当 访 问 到 表 中 不 人 存在 的 域 时 ， 将 调用 其 元 表 的 “_index” 元 方法 (如 果 该 表 指 定 了 元 表 并 且 元 表 定 义 了 “_index” 元 方法 的 话 ) 。 如 果 其 元 表 的 “_index” 方 法 返回 一 个 表 中 合 
有 该 域 ， 则 访问 该 域 。 如 果 一 个 元 表 不 被 设置 给 一 个 本 表 ， 那 么 它 是 没有 意义 的 ， 一 个 本 表 的 元 表 可 以 是 自身 。 这 个 函数 创建 一 个 本 表 “tab” ， 并 把 传 进来 的 元 表 self (应 该 就 是 object 本 身 ) 调用 
setmetatable 设 置 给 它 ， 然 后 将 “_index” 原 方法 设置 为 自身 。 这 样 就 可 以 调用 new 来 复制 新 的 对 象 了 ， 并 且 每 个 通过 这 个 函数 调用 的 方法 都 是 独立 的 ， 数 据 域 也 是 独立 的 。 


虽然 对 象 之 间 是 独立 的 ， 但 是 需要 在 每 次 调用 函数 时 传 入 自己 的 本 表 ， 所 以 可 以 看 到 ， 在 Lua 面 向 对 象 的 冰 数 中 ， 都 会 传 入 一 个 参数 “self”， 这 就 是 自己 的 本 表 ， 所 以 ，object 的 函数 要 按照 如 下 方式 
调用 ， 见 代码 清单 11-7。 


代码 清单 11-7 object 的 函数 调用 


function object.setData (self 
‚ data) 

m data = data 
end 
local m obj = object.new (object) 
m obj.setData (m obj,0) 


这 样 的 调用 方式 比较 繁琐 ， 于 是 Lua 中 提供 了 “: ”可 以 省 略 传 入 本 表 ， 具 体 使 用 方法 见 代码 清单 11-8。 
代码 清单 11-8 ”Lua 中 的 另 一 种 函数 调用 方式 

local m obj = object 

m obj 


: setData (0) 


"D^ 会 把 它 左边 的 对 象 作为 第 一 个 参数 传 入 函数 中 ， 这 样 就 可 以 省 略 传 入 表 的 操作 了 。 


Lua 面 向 对 象 中 实现 继承 可 以 使 用 如 下 的 方法 ， 见 代码 清单 11-9。 


代码 清单 11-9 Lua 中 的 继承 


Deriver = Base:new(); 
Deriver.new = function (self) 
local o = getmetatable (self).new (self); 
return о; 


end 
dobjl = регіуег:пем () 


关于 Lua 中 的 面向 对 象 实现 方法 ， 云 风 提 供 了 另外 一 种 方式 [， 总 体 的 思路 是 提供 一 个 全 局 的 函数 class， 这 个 函数 传 入 父 类 的 名 称 ， 基 本 思路 就 是 把 新 类 的 原型 表 (从 父 类 继承 ) 封装 在 这 个 函数 里 ， 
如 同 把 代码 清单 11-9 中 所 做 的 事情 封装 在 class 里 面 一 样 。 


最 后 需要 强调 的 一 点 ，Lua 中 并 没有 类 似 C++ 的 public 和 Private 修饰 符 能 够 把 函数 “保护 ”起 来 的 方法 ， 可 以 把 相应 的 函数 设置 成 local， 然 后 不 包含 在 返回 的 表 中 即 可 。 
其 他 关于 Lua 的 用 法 可 以 参考 《Lua 游 戏 开 友 实践 指南 》。 


[1] 见 云 风 的 博客 http://blog.codingnow.com/2006/06/oo0_lua.html。 


11.2 Lua 与 Cocos2D-X 的 结合 
Lua 与 Cocos2D-X 的 结合 ， 主 要 包括 Lua 与 C++ 部 分 的 互相 调用 。 
11.2.1 “C++ 调用 Lua 
C++ 可 以 调用 Lua 文 件 或 者 Lua 国 数 ，Lua 文 件 的 调用 方式 见 代 码 清单 11-10。 


代码 清单 11-10 “Lua 文 件 的 调用 方式 


ua 
脚本 引擎 单 例 


LuaEngine* pEngine = LuaEngine::getInstance(); 


设置 脚本 引擎 


ScriptEngineManager::getInstance()-»setScriptEngine (pEngine); 


代码 清单 11-11 


tack-»pushFloat (schedulerI 
Блер ж= 4 
tack-»clean(); 


C++ 调用 Lua 函 数 的 代码 


nfo-»elapse); 
stack-»executePFunctionByHandler (schedulerl 


nfo-»handler, 1); 


у. 


这 


Cocos2D-X 3.0 之 前 ， 我 们 都 是 把 需要 回调 的 Lua 函 数 作为 整数 传 入 到 类 中 作为 


需要 说 明 的 是 ，_stack 是 LuaStack 类 的 实例 ， 


这 个 类 负责 C++ 中 执行 文件 ， 它 包括 的 函数 见 表 11-6。 


表 11-6 LuaStack 类 相关 函数 


名 HW 返回 类 型 
executeGlobalFunction FARY 
executeFunctionByHandler FEHI 
pushInt e 
pushFloat e 
pushLong 25 
pushBoolean 25 
pushString 字符 串 


pushFunctionByHandler 布尔 型 


代码 清单 11-12 ”在 ScriptHandlerM gr 中 存 入 回调 函数 


个 句柄 保存 ， 在 3.0 版 本 以 后 ， 将 这 个 


T 
TU T AR ERA 
根据 handler dA T ERA 


Y 


传人 整形 参数 
传人 浮 点 型 参数 
传人 长 型 参数 
传人 布尔 型 参数 


Pam P 
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— 


传人 字符 吓 ZA 
Fz A FRA. handler 


函数 传 入 ScriptHandlerMgr 中 ， 由 这 个 类 做 统一 处 理 ， 见 代码 清单 11-12。 


LUA F 
ScriptHand] 
Scrip! 


UNCT] 


cHandl 


[ON handler = tolua 


fix ref function(tolua 5,2,0); 
erMgr::getInstance()-»addObjectHandler ((void*)cobj, handler, 


LerMgr::HandlerType::MENU CLICKED); 


存 入 ScriptHandlerMgr 中 的 函数 由 LuaEngine 处 理 ，LuaEngine 是 Cocos2D-X 中 处 理 Lua 脚 本 语言 的 核心 类 ， 它 基本 是 调用 Luastack 类 的 相关 函数 进行 处 理 ， 见 表 11-7。 


Ж11-7 ”LuaEngine 相 关 函 数 


名 返回 类 型 


ER 


executeGlobalFunction 整 型 
executeEvent 整 型 
sendEvent КЕ 70) 
handleEvent 整 型 


getLuaStack 


11.2.2 Lua 调用 C++ 


将 一 个 C++ 类 暴露 给 Lua 需 要 在 C+ + 中 进行 注册 ， 注 册 的 方法 见 代 码 清单 11-13。 


代码 清单 11-13 


暴露 SimpleAudioEngine 


Tí 
执行 全 局 函数 
执行 事件 
发 送 并 执行 时 间 
执行 事件 
549: LuaStack 实例 


1Ж 


int lua register cocos2dx Simpl 


eAudioEngine (lua State* tolua S 


— 


{ 


tolua usertype (tolua S,"cc.SimpleAudioEngine"); 
tolua cclass(tolua S,"SimpleAudioEngine", 
"cc.SimpleAudioEngine"," ",nullptr); 
tolua beginmodule (tolua S,"SimpleAudioEngine"); 
tolua function(tolua S,"preloadMusic", 
lua cocos2dx SimpleAudioEngine preloadBackgroundMusic); 
tolua function(tolua S,"stopMusic", 
a cocos2dx SimpleAudioEngine stopBackgroundMusic); 
tolua function (tolua S,"stopAllEffects", 
a cocos2dx SimpleAudioEngine stopAllEffects); 
tolua function(tolua S,"getMusicVolume", 
a cocos2dx SimpleAudioEngine getBackgroundMusicVolume); 


| 


cocos2dx Sim 


tolua function(tolua S,"resumeMusic", 
a cocos2dx SimpleAudioEngine resumeBackgroundMusic); 
tolua function(tolua S,"setMusicVolume", 
a cocos2dx SimpleAudioEngine setBackgroundMusicVolume); 
tolua function (tolua S, "preloadEffect", 
a cocos2dx SimpleAudioEngine preloadEffect); 
tolua function(tolua S,"isMusicPlaying", 


leAudioEngine isBackgroundMusicPlaying); 


= 


tolua function(tolua S,"getEffectsVolume", 
E eAudioEngine getEffectsVolume); 
tolua function(tolua S,"willPlayMusic", 
a cocos2dx SimpleAudioEngine willPlayBackgroundMusic); 
tolua function (tolua S, "pauseEffect", 
a cocos2dx SimpleAudioEngine pauseEkffect); 
tolua function(tolua S,"playEffect", 
a cocos2dx SimpleAudioEngine playEffect); 


OCOCGCOCOCGCOCOcCGOCO E OCcCOCGCOCOCGCOCGOCGOCO 


о 
р 
о 
р 
о 
р 
о 
р 
о 
р 
о 
р 
о 
р 
о 

cocos2dx Simpl 
о 
р 
о 
р 
о 
р 
о 
р 
о 
р 
о 
р 
О 
р 
е 
р 


tolua function(tolua S,"rewindMusic", 
a cocos2dx SimpleAudioEngine rewindBackgroundMusic); 
tolua function(tolua S,"playMusic", 
a cocos2dx SimpleAudioEngine playBackgroundMusic); 
tolua function(tolua S,"resumeAllEffects", 
a cocos2dx SimpleAudioEngine resumeAllEffects); 
tolua function(tolua S,"setEffectsVolume", 
a cocos2dx SimpleAudioEngine setEffectsVolume); 
tolua function(tolua S,"stopEffect", 
lua cocos2dx SimpleAudioEngine stopEffect); 


tolua function(tolua S,"pauseMusic", 
lua cocos2dx SimpleAudioEngine pauseBackgroundMusic); 


u ua S,"pauseAllEffects", 


tolua function( X 
lua cocos2dx SimpleAudioEngine pauseAl 
tolua function( ua S,"unloadEffect", 

lua cocos2dx SimpleAudioEngine unloadEffect); 
tolua function( 
lua cocos2dx Sim 
tolua function( 
tolua function( 
lua cocos2dx SimpleAudioEngine getInstance); 
tolua endmodule (tolua S); 
std::string typeName = 


typeid (CocosDenshion::SimpleAudioEngine) .name(); 


( 


т 


Effects); 


( 


ua S,"resumeEffect", 
eAudioEngine resumeEffect); 
ua S,"end", lua cocos2dx SimpleAudioEngine end); 


ua S,"getInstance", 


( 


( 


(9 


'0 0 0'0 0'0 O'O O'O 


g luaType[typeName] = "cc.SimpleAudioEngine"; 
g typeCast["SimpleAudioEngine"] = "cc.SimpleAudioEngine"; 
return 1; 


tolua_function 再 调用 lua_cocos2dx 类 名 Rž иа ИНА, Xx EREIGEBBBUEUNS 7 AM RiSER 11-14. 


代码 清单 11-14 ”暴露 stopBackgroundMusic 函 数 


int lua cocos2dx SimpleAudioEngine stopBackgroundMusic(lua State* tolua S) 


{ 


int argc = 0; 
CocosDenshion::SimpleAudioEngine* cobj = nullptr; 
bool ok = true; 
«if COCOS2D DEBUG >= 1 
tolua Error tolua err; 
fendif 
*if COCOS2D DEBUG >= 1 
f (!tolua isusertype (tolua 5,1, 
"cc.SimpleAudioEngine",0,&tolua err)) goto tolua lerror; 
fendif 
cobj = 
(CocosDenshion::SimpleAudioEngine*)tolua tousertype (tolua 5,1,0); 
*if COCOS2D DEBUG >= 1 
if (!cobj) 
{ 


L- 


tolua error(tolua S,"invalid 'cobj' in function 

"Іра cocos2dx SimpleAudioEngine stopBackgroundMusic'", 
nullptr); 

return 0; 


fendif 
argc = lua gettop(tolua 5) -1; 
if (argc == 0) 

{ 


if(lok) 

return 0; 
cobj-»stopBackgroundMusic(); 
return 0; 


A: 


if (argc == 1) 


bool arg0; 
ok &= luaval to boolean(tolua S, 2,&arg0); 
if(!ok) m E 

return 0; 
cobj->stopBackgroundMusic (arg0) ; 
return 0; 


CCLOG("$s has wrong number of arguments: $d, was expecting $d Mn", 
"stopBackgroundMusic",argc, 0); 
return 0; 
fif COCOS2D DEBUG >= 1 
tolua lerror: 
tolua error(tolua 5,"#Ғеггог in function 
'lua cocos2dx SimpleAudioEngine stopBackgroundMusic'.", 
&tolua err); 
fendif 
return 0; 


这 个 函数 很 复杂 ， 但 是 不 需要 写 这 个 国 数 ， 仪 需要 使 用 相关 工具 来 生成 它 ， 在 最 早 的 版 本 中 ， 是 使 用 toLua+ + 来 生成 ， 这 个 工具 首先 把 需要 暴露 的 类 的 头 文件 转换 成 PKG 文 件 ， 这 个 转换 过 程 只 需要 留 
下 类 中 的 公共 函数 即 可 ， 但 是 生成 的 文件 还 需要 不 少 改动 才能 适应 的 Cocos2D-X。 所 以 Cocos2D-X 提 供 了 一 套 自己 的 工具 ， 使 用 这 个 工具 的 步骤 如 下 。 


1) 下 载 相关 文件 ， 包 括 以 下 几 个 文件 。 
: Python2.7.3: Mac 系 统 不 需要 下 载 ，Windows 地 址 为 http://www.python.org/。 


: pyyaml 和 pyCheetah: 在 Mac 下 使 用 PIP 下 载 ， 输入 如 图 11-1 所 示 的 命令 。 


sudo easy install pip 
sudo pip install PyYAML 


sudo pip install Cheetah 


图 11-1 pyyaml£epyCheetah F 3X 


: Windows F 3436, ÀE 7j http:/ /pyyaml.org/download/pyyaml/ fehttps:/ /raw.github.com/dumganhar/cocos2d-x/download/downloads/Cheetah.zip, 5 7| B6 S XfAndroidgNDKA4eNDK. КООТЖ À E 5 -RHL #0 
是 ， 对 NDK 的 版 本 是 有 要 求 的 ， 必 须 是 “19b” 版 本 。 


2) 在 “cocos2d-x/toolstolua” 路 径 下 添加 .in 配置 文件 ， 这 个 文件 包括 需要 忽略 的 六 数 、 头 文件 路 径 、 生 成 文件 的 名 称 等 ， 部 分 配置 名 称 意义 见 表 11-8。 


表 11-8 ”部 分 配置 名 称 意义 


= ER 摘 述 
prefix 最 后 生成 的 文件 都 会 以 这 个 命名 前 级 
你 的 所 需 转 换 的 类 的 名 称 ， 必 须 是 所 导入 的 头 文件 中 所 有 的 类 ， 这 里 可 以 使 用 正则 表 


classes 大 式 来 加 入 多 个 类 

extra arguments 接口 所 需 的 系统 参数 

target namespace 命名 空间 ， 例 如 你 的 类 为 test， 命 名 空间 为 cocos2dx, ， 那 么 最 后 生成 的 就 是 cocos2dx.test 
rename functions 可 以 将 你 要 绑 定 的 方法 的 名 称 更 改 成 你 所 要 的 。 可 以 更 改 多 个 ， 用 去 号 隅 开 

skip 跳 过 你 所 不 震 要 绑 定 的 方法 和 类 ， 于 是 就 不 生成 


3) 在 “cocos2d-x/tools/tolua” 路 径 下 ， 用 Python 运行 “genbindings.py” 生 成 文件 ， 然 后 将 这 些 文件 放 到 “cocosNscriptingNXauto-generatedNs-binding” 路 径 之 下 


11.3 ”Cocos2D-X 的 Lua 相 关 框 架 


很 多 大 公司 采用 Cocos2D-X+Lua 的 方式 进行 开发 ， 首 先是 因为 Lua 和 C++ 结合 得 很 好 ， 运 行 速度 几乎 和 原生 C++ 没有 区 别 ， 第 二 是 因为 Lua 和 C++ 结合 技术 很 成 熟 了 ， 开 发 速度 可 以 很 快 ; 但 是 开发 过 
程 中 也 有 很 多 问题 ， 笔 者 看 来 ， 使 用 Lua 需 要 一 个 很 好 的 框架 ， 其 中 最 有 名 的 框架 是 Quick-Cocos2D-X， 这 是 一 个 以 更 少 的 代码 、 更 高 的 开发 效率 为 目标 的 一 个 开发 框架 ， 官 方 网 址 是 http://quick- 
x.Com/， 目 前 它 已 经 被 触 控 科 技 收购 ， 成 为 Cocos2D-X 引 警 的 一 员 


Quick-Cocos2D-X 最 大 的 特色 是 为 了 节省 程序 员 的 工作 ， 做 了 很 多 比 Cocos2D-X 更 易 用 的 接口 ， 其 中 最 著名 的 是 Bridge 系 列 可 以 在 Lua 中 直接 调用 Objective-C 和 Java。 有 目前 这 个 功能 已 经 加 入 到 
Cocos2D-X 中 ， 它 可 以 帮助 我 们 更 加 轻松 地 调用 平台 相关 代码 ， 使 用 方法 见 代 码 清单 11-15。 


代码 清单 11-15 Bridge 系列 的 使 用 


中 直接 调用 Objective-C 

local args = { num] = 2 , num2 = 3 } 

] l luaoc = require "luaoc" 

local className - "LuaObjectCBridgeTest" 

local ok,ret = luaoc.callStaticMethod (className, "addTwoNumbers", args) 
if not ok then 
Director:getInstance|():resume() 


else 


print("The ret is:", ret) 


local luaj = require "luaj" 
local className - 
"Com/cocos2dx/sample/LuaJavaBridgeTest/LuaJavaBridgeTest" 
local ok,ret = 
luaj.callStaticMethod (className, "addTwoNumbers", args, sigs) 


if not ok then 

print("luaj error:", ret) 
else 

print("The ret is:", ret) 
end 


Lua 的 代码 组 织 不 像 C++ 那 样 简单 ， 是 因为 Lua 代 码 更 加 灵活 ， 实 现 同 样 的 功能 方式 也 比较 多 ， 这 样 就 造成 多 人 配合 完成 项 目 时 代码 不 统一 ， 所 以 项 目 开始 前 需要 提前 制定 好 框架 和 代码 规范 ， 这 也 是 为 
什么 一 个 框架 对 于 Cocos2D-X+Lua 这 么 重要 。 如 果 没 有 这 方面 的 经 验 ， 最 好 的 办 法 是 阅读 Quick-Cocos2D-X 的 代码 。 另 外 ， 代 码 需要 降低 与 Cocos2D-X 的 耦合 性 ， 这 就 需要 将 常用 的 代码 段 提取 出 来 做 成 
公共 接口 ， 比 如 一 些 用 Action 实 现 的 动画 等 。 总 之 ， 降 低 厅 合 性 以 及 更 好 的 代码 规范 对 于 Cocos2D-X+Lua 开 发 ， 尤 其 是 多 人 协作 十 分 重要 。 


11.4 本章 小 结 


本 章 介 绍 Cocos2D-X 中 的 脚本 语言 Lua，Cocos2D-X+Lua 框 架 以 其 较 高 的 可 用 性 和 易 用 性 受到 了 很 多 开发 者 的 喜爱 ， 相 对 于 JavaScript 框 架 ， 这 个 框架 也 更 加 成 熟 。 本 章 从 Lua 的 基础 讲 起 ， 到 Lua 和 
C++ 的 交互 ， 最 后 讲解 Cocos2D-X+Lua 最 有 名 的 框架 Quick-Cocos2D-X， 学 习 本 章 ， 你 已 经 打下 Lua 的 基础 ， 可 以 尝试 将 以 前 用 C+ + 或 者 JavaScript 写 的 游戏 转换 成 基于 Lua 的 ， 这 样 你 会 有 更 深 的 认识 。 


下 一 章 介 绍 Cocos2D-X+JavaScrpt 框 架 以 及 Cocos2D-HTML5。 


第 12 章 ”Cocos2D-X 中 的 脚本 语言 一 一 JavaScript 


第 11 章 介绍 了 Cocos2D-X 支 持 的 脚本 语言 Lua， 可 以 说 Cocos2D-X+Lua 已 经 形成 了 一 套 相当 成 熟 的 开发 体系 ， 那 么 为 什么 还 要 加 入 新 的 脚本 语言 呢 ， 这 就 和 Cocos2D-X 的 跨 平台 “野心 ”有 关 。 从 2.0 
版 本 起 ，Cocos2D 家 族 就 在 进行 不 同 分 支 的 接口 统一 工作 ， 目 的 是 真正 实现 “一 次 编码 ， 到 处 运行 ”， 而 这 个 计划 的 关键 就 是 JavaScript。 由 于 它 是 HTML5 的 开发 语言 ， 而 HTML5 也 是 支持 跨 平 台 的 ， 因 此 
当 Cocos2D-X 支 持 使 用 JavaScript 进 行 开发 的 时 候 ， 编 写 一 次 JavaScript 代 码 可 以 横 跨 iOS、Android、Windows、Linux 和 和 浏览 器 等 多 个 平台 ， 真 正 实现 “一 次 编码 ， 到 处 运行 ”。 进 入 了 3.0 时 
代 ，Cocos2D-X 中 的 JavaScript 绑 定 部 分 被 独立 地 分 出 来 ， 和 Cocos2D-HTML5 形 成 了 Cocos2D-JS 分 支 ， 这 个 分 支 将 独立 于 Cocos 2D-X 进 行 开发 本 章 首先 介绍 HTML5 和 JavaScript， 然 后 介绍 一 些 
JavaScript 的 基本 用 法 ， 最 后 介绍 Cocos2D-X 中 的 JavaScript 绑 定 的 使 用 。 


12.1 认识 HTML5 


HTML5 是 继 1999 年 HTML 4.01 以 后 的 新 标准 ， 一 些 新 的 标签 (如 canvas 和 video 等 ) 可 以 替代 之 前 的 第 三 方 插 件 的 实现 。 因 为 这 些 新 的 功能 ，HTML5 受 到 广泛 关注 ， 直 到 2008 年 HTML5 的 第 一 份 正式 


目前 HTML5 仍 然 处 于 不 断 完 善 阶段 ， 但 是 已 经 支持 很 多 主流 的 浏览 器 ， 包 括 Firefox、IE 9、Chrome、Safari 等 。HTML5 的 标志 如 图 12-1 所 示 。 


HTML 


图 12-1 HTMI5 标 志 


HTML5 不 仅 提 升 了 网 页 的 表现 性 能 ， 还 将 之 前 需要 添加 第 三 方 插件 的 多 媒体 功能 通过 标签 添加 到 HTML5 中 ， 对 于 游戏 的 开发 ，HTML5 添 加 了 canvas 画 布 标签 。 
1.HTML5 的 特点 


(1) 全 新 的 结构 内 容 元 素 


在 HTML5 之 前 ， 无 论 网 页 的 内 容 多 么 复杂 ， 都 必须 采用 div 和 span 这 样 的 文档 概念 设计 文档 结构 。HTML5 提 供 了 许多 新 的 元 素 ， 解 决 结构 内 容 元 素 单 一 的 问题 ， 包 括 header 页 眉 元 素 、hgroup 分 组 元 
素 、footer 页 脚 元 素 、nav 导 航 菜单 元 素 、article 文 章 元 素 和 aside 引 文 元 素 等 结构 元 素 ， 以 及 figure 图 像 元 素 、figcaption 标 题 元 素 、mark 引 用 元 素 和 time 时 间 元 素 等 。 这 些 全 新 的 结构 内 容 元 素 使 得 网 页 
开发 更 容易 、 便 捷 。 


(2) 全 新 的 表单 设计 


在 处 理 表单 时 ， 经 常 对 表单 验证 和 安全 检察 的 复杂 性 深 有 感触 ， 这 是 由 于 表单 的 控件 较 少 ， 验 证 表单 和 实现 职能 必须 采用 JavaScript。HTML5 改 变 了 这 种 情况 ， 不 仪 支持 浏览 器 验证 的 验证 方式 ， 还 可 
以 通过 input 控 件 的 type 类 型 来 控制 控件 的 类 型 ， 此 外 表单 还 有 其 他 许多 的 输入 类 型 、 属 性 和 特性 。 


(3) 强大 易 用 的 媒体 工程 
HTML5 不 需要 依赖 专用 的 技术 就 能 够 创建 这 些 媒体 内 容 ， 也 不 需要 使 用 外 部 插件 ， 这 些 元 素 都 具有 开放 的 JavaScript API， 可 以 简化 对 媒体 元 素 的 控制 ， 这 也 是 HTML5 的 核心 目标 。 


媒体 控制 的 元 素 中 包括 audio 音 频 播 放 元 素 、video 视 频 播放 元 素 ， 以 及 对 网 页 游戏 开 友 有 跨 时 代 意 义 的 canvas 图 形 绘制 画布 元 素 。canvas 元 素 不 仅 简 单 易 用 ， 而 且 通 过 javascript API 和 一 些 创 新 运 
用 ，canvas 本 身 可 以 成 为 一 个 能 够 创建 动态 图 形 和 交互 体验 的 强大 工具 。 


2.HTML5 的 用 途 
HTML5 的 用 途 如 下 。 
. 提高 可 用 性 和 改进 用 户 的 友好 体验 。 
“ 给 网 站 带 来 更 多 的 多 媒体 元 素 。 
© 对 网 站 的 抓 取 和 索引 友好 。 
_ 应 用 于 移动 应 用 程序 和 游戏 。 
对 开发 者 更 易 用 。 


HTML5 的 性 能 让 它 的 前 景 更 美好 ， 但 是 标准 在 定义 的 过 程 中 也 会 出 现 这 样 或 那样 的 问题 ， 也 会 出 现 对 部 分 标准 的 分 收 ， 尽 管 如 此 ， 未 来 HTML5 无 论 在 移动 平台 还 是 在 网 页 开发 中 都 会 有 自己 的 一 席 之 
地 。 


12.2 JavaScript 基本 介绍 


JavaScript 是 一 种 基于 对 象 和 事件 驱动 并 具有 相对 安全 性 的 客户 端 脚 本 语言 ， 广 泛 应 用 于 客户 端 Web 开 发 ， 常 用 来 给 HTML (标准 通用 标记 语言 的 子 集 ) 网 页 添加 动态 功能 ， 比 如 响应 用 户 的 各 种 操 
作 ， 也 可 以 用 于 其 他 场合 ， 如 服务 器 端 编 程 。 最 初 由 网 景 公 司 (Netscape) 的 Brendan Eich 设 计 ， 是 一 种 动态 、 弱 类 型 、 基 于 原型 的 语言 ， 内 置 支持 类 。JavaScript 是 Sun 公司 (已 被 Oracle 收 购 ) 的 注册 
商标 。Ecma 国 际 以 JavaScript 为 基础 制定 了 ECMAScript 标 准 。 完 整 的 JavaScript 实 现 包含 三 个 部 分 : ECMAscript、 文 档 对 象 模型 、 字 节 顺 序 记号 。 


JavaScript 具 有 简单 性 和 跨 平台 性 等 特性 ， 由 于 它 依 赖 于 浏览 嚣 本身 ， 与 操作 环境 无 天 ， 只 要 能 运行 浏览 器 的 计算 机 ， 并 支持 JavaScript 的 浏览 器 就 可 正确 执行 ， 所 以 常常 用 于 跨 平台 的 开发 。 另 外 ， 它 
是 一 种 基于 对 象 的 语言 ， 同 时 可 以 看 做 一 种 面向 对 象 的 ， 这 意味 着 它 能 运用 自己 已 经 创建 的 对 象 。 因 此 ,许多 功能 可 以 来 自 于 脚本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 ;另外 和 Lua 一 样 的 是 ，JavaScript 也 
提供 类 似 的 内 存 回 收 机 制 ， 本 节 就 介绍 Javascript 的 一 些 基 本 功能 。 


12.2.1 JavaScript 的 变量 和 内 置 类 型 


Javascript 也 是 “ 弱 类 型 ”， 定 义 一 个 Javascript 的 变量 需要 命名 一 个 标识 符 ， 标 识 符 同 样 由 数字 、 字 母 和 下 划 线 组 成 ， 并 且 只 可 以 是 字母 或 者 下 划 线 开头 ， 另 外 ， 注 意 和 保留 字 区 分 。 


声明 一 个 Javascript 变 量 也 需要 在 变量 前 加 上 “var” 作 为 修饰 ， 否 则 会 被 看 做 全 局 变量 ， 所 以 当 确 定 一 个 变量 的 作用 域 只 是 在 本 地 的 时 候 ， 请 显 式 声明 变量 。 变 量 的 作用 域 是 这 样 的 : 首先 从 函数 块 中 
找 ， 如 果 找 不 到 ， 从 上 一 级 函数 块 找 ， 直 到 找到 ， 如 果 知 道 项 层 代码 没 找到 定义 ， 代 码 会 报 未 定义 错误 ; 另外 ， 由 于 Javascript 采 用 内 存 自 动 回收 机 制 ， 为 了 更 好 地 利用 内 存 ， 请 尽量 声明 本 地 变量 。 


Javascript 中 的 内 置 类 型 如 表 12-1 所 示 。 


表 12-1 JavaSctipt 中 的 内 置 类 型 


名 称 fü Ж 
Null Null 类 型 的 语义 是 “一 个 空 的 对 象 引 用 ”， 它 只 有 一 个 Null 值 
— ЭЦ [Н ЖЕЛ 会 变 成 假 ， 而 其 他 数值 将 会 变 成 下， 空 字符 串 返 回 假 。undefined 和 
null 将 会 返回 假 
JavaScript 的 Number 共有 18 437 736 874 454 810 627 个 值 。JavaScript 的 
Number Number 以 双 精 度 浮 点 类 型 存储 ， 除 了 9007199254 740 990, XR NaN, "Cii 
用 64 位 8 字 节 
m 字符 串 类 型 ， 是 一 个 16 位 无 符号 整数 类 型 的 序列 ， 它 实际 上 用 来 表示 以 
Р UTF-16 编码 的 文本 信息 
Obiect аде 中 最 为 复杂 的 类 型 就 是 Object, CHE » 系列 属性 的 АЕН: A, Function 
j 是 实现 了 私有 属性 的 Object, JavaScript {д 3: u] РД р e. 
undefined 类 型 只 有 一 个 值 undefined， 它 是 变量 示人 被 赋值 时 的 但 ， 在 JS 中 全 
undefined 局 对 象 有 一 个 undefined 属性 表示 undefined， 事 实 上 undefined 并 非 JavaScript 
的 关键 字 ， 可 以 给 全 局 的 undefined 属性 赋值 来 改变 它 的 值 
由 于 Javascipt 弱 类 型 的 特点 ， 类 型 间 的 转换 非常 容易 ， 比 如 字符 串 类 型 转换 成 数值 型 ， 只 需要 把 字符 串 类 型 的 变量 加 上 0 就 可 以 ， 反 之 亦 然 。 字 符 串 类 型 和 数值 类 型 的 转换 方法 见 代码 清单 12-1。 


代码 清单 12-1 Javascript 中 字符 串 类 型 和 数值 类 型 的 转换 


var m str = "1.0" 
var m nm = 1 
var m numtostr = "" + m num // 
数值 转换 成 字符 
var m numtostr = new String (m num) // 
数值 转换 成 字符 

=0+m str // 


var m strtonum 
字符 串 转 换 成 数值 


当 一 个 对 象 或 者 函数 被 转换 为 字符 串 时 ， 它 们 的 toString 方 法 将 会 被 调用 (类 似 Java) 。 默 认 会 执行 Object.prototype.toString 以 及 Function.prototype.toString， 除 非 重 写 toString 方 法 。 把 一 个 函 
数 转换 到 字符 串 ， 返 回 结果 并 非 是 必需 的 。Function.prototype.toString 方 法 就 能 完成 大 部 分 需要 ， 它 将 会 返回 host objects 和 方法 。 


其 他 字符 串 类 型 的 函数 见 表 12-2。 


表 12-2 Luat 85 FAF P SE 3 


名 HH я Ж 


string.length() 字符 串 长 度 

string.charAt(index) 得 到 字符 串 的 指定 位 置 的 字符 使 用 方法 
string.toLowerCase(s) А АУЛ AUS SERERBHR NV 
string.toUpperCase(s) 将 字符 串 中 的 所 有 小 写字 母 转换 为 大 与 


第 一 个 参数 1 指定 了 子 字 符 串 在 原 字 符 串 中 的 起 始 位 置 ( (基于 0 的 索引 ) -个 参数 ] 
是 可 选 的 ， 它 指定 了 子 字 符 串 在 原 字 符 串 的 结束 位 置 (基于 0 的 索引 ),， 一 般 情 况 下 ， 它 
应 比 i 大 ， 如 有 果 它 被 省 略 ， 那 么 子 字符 串 将 一 直到 原 字 符 串 的 结尾 处 。 如 采 参 数 1 比 参数 
j 大 ,会 日 动 调解 子 字 符 串 的 起 止 位 置 ， 也 就 是 说 ，substring0 总 是 从 两 个 参数 中 较 小 的 那 
个 开始 ， 到 较 大 的 那个 结束 。 注 意 ， 它 包含 起 始 位 置 的 字符 ， 但 不 包含 结束 位 置 的 字符 

类 化 | substring 

判 漂 [一 个 字符 串 是 否 包含 另 一 个 字符 串 


落得 一 个 字符 的 Unicode #119. Б КУ 


string.substring(i.j) 


string.slice(v) 
string. indexOf() 
string.charCodeAt() 


和 Lua 类 似 ，JavaScript 中 的 数组 也 相当 于 我 们 经 常 使 用 的 数组 和 字典 两 种 数据 结构 ， 声 明 一 个 数组 需要 在 声明 变量 时 将 它 赋值 “[]”， 这 就 是 一 个 空 的 数据 表 ， 关 于 数据 表 的 定义 和 使 用 见 代码 清单 12- 


代码 清单 12-2 table 类 型 的 声明 和 使 用 


var mtab = [] 
// vax m tab = new Array(); 


gm 


数组 中 的 相关 函数 介绍 见 表 12-3。 


表 12-3 ”数组 中 的 相关 函数 


名 称 描 述 
array.push() 将 一 个 或 多 个 新 元 系 添 加 到 数组 纺 尾 ， 并 返回 数组 新 长 度 


array.unshift() 


array.splice() 


将 一 个 或 多 个 新 元 素 添 加 到 数组 开始 ， 数 组 中 的 元 素 自 动 后 移 ， 返 回 数组 新 长 度 
将 一 个 或 多 个 新 元 素 捅 人 到 数组 的 指定 位 置 ， 搬 人 位 置 的 元 素 上 月 动 后 移 ， 返 回 "" 


array.pop() йил — T 2768233 Inl iz л 2 fH 

array.shift() 移 除 最 前 一 个 元 系 并 返回 该 元 了 闵 值 ， 数 组 中 元 系 月 动 前 移 

array.splice() 删除 从 指定 位 置 deletePos 开始 的 指定 数量 deleteCount MICR, VCRE GR 1 НУС 3 
array.concat() 将 多 个 数组 连接 为 一 个 数组 ， 返 回 连接 好 的 新 的 数组 

array.length 数组 长 度 


12.2.2 ”JavaScript 的 操作 符 和 控制 结构 


JavaScript 使 用 “//” 作 为 单行 注释 ，“/*” 和 “*/” 作 为 多 行 注释 。 


比 起 Lua，JavaScript 的 控制 结构 更 接近 C++ 和 Java，JavaScript 中 的 if-else 例 子 见 代码 清单 12-3。 


代码 清单 12-3 ”Lua 中 的 if-else 例 子 


if (ш roundindex > 6) { 
backToPVE () 
}else if (m roundTab[m roundindex] == 5) { 
runBattleRound() 
}else{ 
runClose () 


Javascript 中 的 while 和 一 般 语言 差不多 ， 示 例 见 代 码 清单 12-4。 


代码 清单 12-4 ”while 和 do while 示 例 


var index = 1 
while index < 10 { 
index = index + 1 


} 
do{ 
index = index + 1 
}while (index > 0) 


Javascript 中 的 for 循 环 有 两 种 形式 ， 包 括 普通 结构 和 forin ， 示 例 见 代 码 清单 12-5。 


代码 清单 12-5 JavaScript 中 的 for 循 环 


// 
遍历 数组 型 表 ， 第 三 个 值 为 每 步 i 
增加 的 值 ， 默 认为 1 
for (i = 0,i < 10,i++){ } 
// JavaScript 
中 也 支持 break 
for (1 z 0,i < 10,1++) { 

if(i == 4) { 

ргеак 


) 
} 


// 

遍历 字典 型 表 ，v 
为 其 中 每 一 个 对 象 
for (v in set) { 


) 


需要 注意 的 是 ，JavaScript 中 也 支持 break， 第 二 个 循环 就 是 使 用 break 跳 出 循环 。 


JavaScript 支 持 switch， 使 用 见 代 码 清 单 12-6。 


代码 清单 12-6 ”JavaScript 中 的 switch 


12.2.3 ”在 JavaScript 中 实现 面向 对 象 


和 Lua 不 同 ，JavaScript 是 面向 对 象 语言 ， 没 有 专门 的 机 制 实现 类 ， 这 里 借助 它 的 浮 数 允许 谋 套 的 机 制 来 实现 类 。 一 个 遂 数 可 以 包含 变量 ， 又 可 以 包含 其 他 函数 ， 这 样 ， 变 量 可 以 作为 属性 ， 内 部 的 浮 数 
就 可 以 作为 成 员 方法 了 。 因 此 外 层 函 数 本 身 就 可 以 作为 一 个 类 了 ， 用 Javascritpt 创 建 类 的 方法 见 代 码 清单 12-7。 


代码 清单 12-7 创建 一 个 类 


// 

第 一 种 生成 类 的 方法 
Function myClass () 
{ 
mvar:0, 
mfuncl 

: function (){ 


} 
// 
第 二 种 生成 类 的 方法 


Function myClass () 


{ 


this.mvar = 0; 
this.mfunci = function () { 


} 


kyd 


实现 了 类 就 应 该 可 以 获得 类 的 实例 ，Javascript 提 供 了 一 个 方法 可 以 获得 对 象 实例 ， 即 使 用 new 操 作 符 。 在 Javascript 中 ， 类 和 函数 是 同一 个 概念 ， 当 用 new 操 作 一 个 函数 时 就 返回 一 个 对 象 。 


一 个 对 象 可 以 使 用 点 的 方法 和 用 方 括 号 引用 对 象 的 成 员 ， 这 里 方 括号 内 是 代表 属性 或 方法 名 的 字符 串 ， 不 一 定 是 字符 串 常 量 。 也 可 以 使 用 变量 ， 这 样 就 可 以 使 用 变量 传递 属性 或 方法 名 ， 为 编程 带 来 方 
便 。 在 某 些 情况 下 ， 代 码 中 不 能 确定 要 调用 那个 属性 或 方法 时 ， 就 可 以 采用 这 种 方式 。 如 果 使 用 点 号 操作 符 ， 还 需要 使 用 条 件 判断 来 调用 属性 或 方法 。 另 外 ， 使 用 方 括号 引用 的 属性 和 方法 名 还 可 以 以 数字 
开头 ,或 者 出 现 空格 ， 而 使 用 点 号 引用 的 属性 和 方法 名 则 遵循 标示 符 的 规则 。 注 意 ， 一 般 不 提倡 使 用 非 标 示 符 的 命名 方法 。 


Javascript 中 ， 在 生成 对 象 之 后 还 可 以 为 对 象 动态 添加 、 修 改 和 删除 属性 和 方法 ， 这 与 其 他 面向 对 象 的 语言 是 不 同 的 ， 这 也 是 由 Javascript 动 态 语言 的 特性 而 决定 的 ， 动 态 添加 函数 的 方法 见 代 码 清单 
12-8。 


代码 清单 12-8 ”为 定义 好 的 类 添加 mfunc2 函 数 


function?myClass () 
{ 
mvar:0, 
mfuncil 
: function() 


} 
} 
var?obj?-?new?myClass (); 
obj. mfunc2 = function 
{ 
} 


它 的 继承 关系 也 很 简单 ， 使 用 extend 就 可 以 继承 相关 的 类 ， 继 承 的 具体 方法 见 代 码 清单 12-9。 


代码 清单 12-9 ЈауаЅсгір ж 


var HelloWorldScene = cc.Scene .extend (1{ 
onEnter:function () { 

this. super(); 

var layer = new HelloWorldLayer(); 
this.addChild (layer); 


Javascript 可 以 区 分 public 和 private， 对 象 的 成 员 都 是 public 成 员 。 任 何 对 象 都 可 以 访问 、 修 改 、 删 除 这 些 成 员 或 添加 新 成 员 。 主 要 有 两 种 方式 在 一 个 新 对 象 里 放置 成 员 ，Pprivate 成 员 由 构造 函数 产 
生 ， 普 通 的 var 变 量 和 构造 函数 的 参数 都 称 为 Private 成 员 。 


其 他 关于 JavaScript 的 用 法 可 以 参考 《JavaScript 权 威 指南 》， 也 就 是 著名 的 “犀牛 书 ”。 


12.3 ”搭建 HTML5 开 发 环境 


首先 需要 下 载 Cocos2D-JS， 然 后 再 配置 网 页 运行 的 环境 。 


可 能 很 多 人 会 不 解 ， 为 什么 需要 配置 环境 呢 ， 这 是 由 于 浏览 器 的 一 些 限制 ， 浏 览 器 禁止 在 本 地 访问 诸如 XMLHttpRequest 函 数 ， 而 Cocos2D 引 擎 中 很 多 文件 的 读 取 都 要 依赖 于 这 些 方法 ， 所 以 需要 将 文 
件 上 传 到 一 个 Web 服 务 器 上 ， 或 者 上 传 到 一 个 本 地 的 开发 环境 中 ， 如 Mac 的 MAMP 和 Windows 的 WAMP， 否 则 浏览 器 就 会 出 现 如 下 的 报错 ，Chrome 浏 览 器 报错 ， 如 图 12-2 所 示 。 


Ө LHttpRequest cannot load file:///E:/prohtm15/cocos2d-ht n15-v0. 5. 09- alpha/cocos2d-ht 215-v0.5. 0- 


alpha/tests/Resources/Images/BoilingFoam.plist. Cross origin requests are only; supported for HTTP. 
© Uncaught Error: HETHORK ERR: XMLHttpRequest Exception 101 


图 12-2 Chrome 浏览 器 报错 


这 并 非 Cocos2D-X 引 警 的 原因 ， 而 是 HTML5 的 特性 ，HTML5 的 有 些 特性 也 需要 将 文件 上 传 到 一 个 Web 服 务 器 上 ， 或 者 上 传 到 一 个 本 地 的 开发 环境 中 ， 比 如 图 像 的 像素 级 操作 ， 如 果 图 像 和 控制 画布 的 
Javascript 不 在 同一 个 位 置 ， 画 布 对 于 访问 这 个 图 像 的 像素 级 操作 会 有 严格 的 限制 。 


本 书 选择 的 是 XAMPP， 它 是 一 个 功能 强大 的 集成 软件 包 ， 用 于 搭建 本 地 网 站 。 这 个 软件 包 原 来 的 名 字 是 LAMPP， 为 了 避免 误解 ， 最 新 的 几 个 版 本 就 改名 为 XAMPP 了 。 它 可 以 在 Windows、Linux、 
solaris 三 种 操作 系统 下 安装 使 用 ， 支 持 多 语言 ， 包 括 英文 、 简 体 中 文 、 繁 体 中 文 、 韩 文 、 俄 文 、 日 文 等 ， 可 以 从 官方 网 站 下 载 该 工具 ， 地 址 为 http://www.apachefriends.org/en/xampp.html。 测 试 的 浏 
览 器 是 Chrome， 由 于 其 提供 了 很 不 错 的 开发 者 支持 。 


首先 下 载 XAMPP， 在 如 图 12-3 所 示 的 列表 中 选择 相应 的 操作 系统 的 版 本 。 


Ea XAMPP for Linux г? 


The distribution for Linus systems (tested for SuSE, RedHat, Mandrake and Debian) 
contains: Apache, MySOL, PHP & PEAR, Perl, PFOFTPD, phpMyAdmin, OpenSSL, GD, 
Freetype2, libjpeg, libpng, gdbm, zlib, expat, Sablotron, lib«ml, Ming, Webalizer, pdf 
cass, ncurses, mod. perl, FreeTDS, gettext, mcrypt, mhash, eAccelerator, SQLite and 
IMAP C-Client. 


"a XAMPP for Windows C? 


The distribution for Windows 2000, 2003, ХР, Vista, and 7. This version contains: 
Apache, MySQL, PHP + PEAR, Perl, mod. php, mod. perl, mod. ssl, OpenssL, phpMvyAdmin, 
Webalizer, Mercury Mail Transport System for wwini32 and NetWare Systems v3.32, Ming, 
Filezilla ҒТР Server, mcrypt, e&cceleratoar, SQLite, and WEB-DAY + mod auth mvsal. 


24 XAMPP for Mac OS Х C 
The distribution for Mac OS X contains: Apache, MySQL, РНР & PEAR, SQLite, Perl, 


ProFTPD, phpMyAdmin, OpenSSL, GD, Freetypez2, libjpeg, libpna, 216, Ming, Webalizer, 
mod pearl. 


2a XAMPP for Solaris Ci 


The distribution for Solaris (developed and tested with Solaris 8, tested with Solaris 9) 
contains: Apache, MYSGL PHP & PEAR, Perl, ProFTPD, phpMyAdmin, OpenssL, Freetype2, 
libipeg, libpng, 216, espat, Ming, Webalizer, рої class. 


图 12-3 XAMPP 对 应 操作 系统 的 版 本 
选择 了 对 应 操作 系统 的 XAM PP 以 后 ， 进 入 下 一 个 界面 ， 如 图 12-4 所 示 。 


这 里 选择 第 一 个 完整 版 本 ， 进 入 版 本 选择 ， 如 图 12-5 所 示 。 


Download 


[5 ХАМР 
D; ХАМРР Add-Ons 
[5 XAMPP USB Lite 


9124 FAZA 


[5 Installer 81 MB Installer 
MDS checksum: 
4500884a3bd21343fce6afcef2f4577be 
148 MB ZIP archive 
MDS checksum: 
198c858c350f78318f0480d85128367füc 
69 MB 7zip archive 
MDS checksum: 


图 12-5 XAMPP 不 同 版 本 
这 里 有 三 个 版 本 供 选择 ， 分 别 是 安装 版 、ZIP 版 和 7ZIP 版 ， 压 缩 版 解压 完成 后 单 击 setup_xampp.bat 文 件 便 可 完成 安装 ， 然 后 单 击 xampp_start.exe 文 件 开始 ， 需 要 停止 时 单 击 xampp_stop.exe 结 束 。 


当 XAMPP 开 始 使 用 后 打开 浏览 器 ， 在 地 址 栏 中 输入 “http://localhost/xampp/index.php”， 如 果 出 现 如 图 12-6 的 页 面 ， 证 明 XAMPP 安 装 成 功 并 已 经 被 使 用 。 


ХА M P P for WI nd OWS English / Deutsch / Francais / Nederlands / Polski 


Español / Ф / Português (Brasil) / A£ 


XAMPP 
tec 欢迎 使 用 XAMPP for Windows! 


NE: 
Ж г. pH XAMPP! 
现在 您 可 以 开始 使 用 Apache 以 及 其 他 的 组 件 , 首先 , ЈАЈЕ 7r ONES RR US LBS AER DRESS Е LTEIE Е. 
您 可 以 通过 训 览 https //127.0.0.1 或 者 https: //l'acalhost 来 验证 OpenSS5L 
өнә 祝 您 好 运 , Кау Vogelgesang + Kai 'Oswald' Seidler 
~ phpinfoQ 
CDA 
生命 周期 
Instant Art 


ei 


perlinfa( 
Guest Book 


图 12-6 XAMPP 安 装 成 功 并 已 经 被 使 用 页 面 
可 以 在 http://www.cocos2d-x.org/news/69 页 面 下 载 2.0 版 本 的 Cocos2D-HTML5， 下 载 之 后 解压 ， 将 目录 下 的 全 部 文件 复制 到 XAMPP 的 目录 htdocs 下 。 
运行 HelloWorld 界 面 如 图 12-7 所 示 。 


Test 示 例 运 行 界面 如 图 12-8 所 示 。 


图 12-7 Cocos2D-HTML5HelloWorld 界 面 


ActionManager Test 
Actions Test 
Box2D Test 

Chipmunk Test 
Click and Move Test 
ClippingNode Test 
CocosDenshion Test 
CocoStudio Test 


CurrentLanguage Test 
DrawPrimitives Test 


图 12-8 Cocos2D-HTML5Test 示 例 运 行 界 面 


12.4 Cocos2D-JS 的 HTML5 运 行 原理 


本 节 分 析 Cocos2D-JS 创 建 的 空 项 目的 结构 。 项 目 结构 如 图 12-9 所 示 。 


其 中 res 文 件 夹 用 来 存放 图 片 和 声音 等 资源 ，src 用 于 存放 JavaScript 文 件 ，main.js 的 功能 类 似 于 Cocos2D-X 中 的 AppDelegate.cpp，main.js 文 件 中 使 用 cocos2d.js 文 件 中 定义 的 对 象 来 设置 游戏 项 目 中 
的 相关 参数 ，index.htm| 是 项 目的 运行 入 口 ， 任 何 JavaSscript 文 件 都 依赖 于 HTML 文 件 运行 ，projectjson 用 于 定义 Cocos2D-JS 的 项 目 配置 数据 ， 包 括 库 文件 位 置 ，frameworks 中 是 Cocos2D 的 JavasScript 


JS 
frameworks index.html main.js project.json 


res runtime Sre 


812-9 HelloWorldz$& A 2525] 


首先 来 看 index.html 文 件 ， 该 文件 是 整个 项 目的 “入 口 ”， 通 过 它 来 调用 其 他 的 JavaScript 文 件 ，index.html 文 件 见 代 码 清单 12-10。 


代码 清单 12-10 index.html 文 件 


«!DOCTYPE html» 


«html» 
<head> 
<meta charset="utf-8"> 
<title>Cocos2d-html5 Hello World test</title> 
<link rel="icon" type="image/GIF" href="res/favicon.ico"/> 
<meta name="apple-mobile-web-app-capable" content="yes"/> 
<meta name=" full-screen" content="yes"/> 
<meta name="screen-orientation" content="portrait"/> 
<meta name="x5-fullscreen" content="true"/> 
<meta name="360-fullscreen" content="true"/> 


<style> 
body, canvas, div { 
-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 


} 
«/style» 

</head> 

<body > 

<canvas id="gameCanvas" width="800" height="450"></canvas> 
<script src-"frameworks/cocos2d-html5/CCBoot.js"»«/script» 
«script src="main.js"></script> 

</body> 

</html> 


可 以 看 到 ， 这 是 一 个 最 基本 的 HTML 定 义 ， 之 前 定义 了 标题 和 网 站 图 标 ， 在 HTML 的 主体 (body) 定义 中 定义 了 canvas 画 布 ， 最 后 调用 了 main.js 文 件 ， 如 果 需 要 修改 起 始 文件 的 名 称 可 以 修改 这 里 ， 上 
面 一 行 是 库 文件 路 径 ， 也 可 以 根据 需要 进行 修改 。mainjjs 文 件 见 代 码 清单 12-11。 


代码 清单 12-11 main.js 文 件 


cc.game.onStart = function (){ 
// 
适 配 大 小 
cc.view.setDesignResolutionSize (800, 450, 


cc.ResolutionPolicy.SHOW ALL); 
Ccc.view.resizeWithBrowserSize (true); 


// 
载 入 资源 
cc.LoaderScene.preload(g resources, function () { 
Ccc.director.runScene (new HelloWorldScene()); 
), this); 


}; 


cc.game.run(); 
这 是 一 个 运行 开始 入 口 ， 设 置 屏幕 大 小 和 适 配 方式 、 设 置 浏 览 器 画布 大 小 等 ， 最 后 用 导演 类 创建 初始 的 场景 。 接 下 来 来 看 项 目 src 文 件 夹 下 的 Javascript 代 码 ，resourcejjs 文 件 见 代码 清单 12-12。 


代码 清单 12-12 resource.js 文 件 


var res = ( 
HelloWorld png : "res/HelloWorld.png", 


С 
С 


loseNormal png : "res/CloseNormal.png", 
loseSelected png : "res/CloseSelected.png" 


}; 
var g resources = [ 
// image 
res.HelloWorld png, 
res.CloseNormal png, 
res.CloseSelected png 
// plist 
// fnt 


|] 


这 个 文件 用 来 存储 资源 路 径 ， 不 仅 包括 图 片 资 源 ， 还 包括 plist 文 件 、 字 体 的 FNT 文 件 、 地 图 的 TMX 文 件 等 ， 接 下 来 看 游戏 的 主体 文件 myAppjs， 首 先 创建 场景 ， 新 建 场景 的 具体 方法 见 代码 清单 12- 
13。 


代码 清单 12-13 “新建 场景 函数 


// 
定义 场景 
var HelloWorldScene = cc.Scene .extend (1{ 
onEnter:function () { 
this. super(); 
var layer = new HelloworldLayer();// 
定义 布景 层 
this.addChild (layer); 


} 
}); 


} 


ЧП 


对 于 使 用 Cocos2D-X 的 人 来 说 ， 一 定 会 很 


* 


代码 清单 12-14 布景 层 的 定义 


var HelloWorldLayer = cc.Layer.extend(( 


/ / 
布景 层 变量 
sprite:null, 
ctor:function () { 
/ / 
父 类 初始 化 方法 
this. super(); 
/ / 
窗口 大 小 


var size = cc.director.getWinSize(); 
// closeltem 


菜单 项 
var closeltem = cc.MenultemImage.create( 
res.CloseNormal png, 
res.CloseSelected png, 
function () { 
cc.log("Menu is clicked!"); 
), this); 
closeltem.attr(í 
x: Size.width - 20, 
y: 20, 
anchorX: 0.5, 
anchorY: 0.5 
}); 
// 
定义 菜单 


var menu = cc.Menu.create (cCloseItem); 
menu.x — 0; 

menu.y — 0; 

this.addChild (menu, 1); 


// 

定义 标签 
var helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38); 
helloLabel.x = size.width / 2; 


helloLabel.y = 0; 
this.addChild(helloLabel, 5); 
/ / 


进入 场景 时 动画 
this.sprite = cc.Sprite.create (res.HelloWorld png); 
this.sprite.attr(( 

x: size.width / 2, 

y: size.height / 2, 

scale: 0.5, 

rotation: 180 


}); 
this.addChild(this.sprite, 0); 

var rotateToA = cc.RotateTo.create(2, 0); 

var scaleToA = cc.ScaleTo.create(2, 1, 1); 
this.sprite.runAction (cc.Sequence.create (rotateToA, 
scaleToA)); 

helloLabel.runAction (cc.Spawn.create (cc.MoveBy.create (2.5, 
cc.p(0, size.height - 40)),cc.TintTo.create(2.5,255,125,0))); 
return true; 


} 
]y 
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和 Cocos2D-X 中 的 场景 初始 化 函数 一 样 ， 该 函数 也 新 建 精灵 和 菜单 项 等 ， 并 把 它们 加 入 到 布景 层 中 ， 同 样 ， 节 


初始 项 目 运行 效果 如 图 12-10 所 示 。 


点 类 


对 象 也 可 以 运行 动作 。 


12-10 ”HelloWorld 项 目 运 行 效果 


12.5 ”JavaScript 与 Cocos2D-X 的 结合 
之 前 介绍 了 Cocos2D-HTML5 的 运行 方式 ， 为 了 实现 “一 次 编码 ， 到 处 运行 ”，Cocos2D-X 也 支持 JavaScript 脚 本 ，Cocos2D-X 使 用 SpiderMonkey 作 为 Cocos2D-X 的 解析 ，SpiderMonkey 是 Mozilla 
项 目的 一 部 分 ， 是 一 个 用 C 语 言 实现 的 JavaScript 脚 本 引擎 ， 另 外 还 有 一 个 叫做 Rhino 的 Java 版 本 ， 为 了 在 SpiderMonkey 中 运行 Javascript 代 码 ， 应 用 程序 必须 有 三 个 要 素 : JSRuntime、JSContext 和 全 局 


对 象 ， 本 节 介 绍 Cocos2D-X 和 JavaScript 的 互相 调用 方式 。 


12.5.1 C++ 调 用 JavaScript 
C++ 可 以 调用 Javascript 文 件 或 者 Javascript 国 数 ，Javascript 文 件 的 调用 方式 见 代码 清单 12-15。 
代码 清单 12-15 ” ”JavaScript 文件 的 调用 方式 


// 
获得 JavaScript 
脚本 引擎 单 例 


auto pEngine = ScriptingCore::getInstance(); 


// 

设置 脚本 引擎 
ScriptEngineManager::getInstance()-»setScriptEngine (pEngine); 
// 

执行 JavaScript 

文件 


ScriptingCore: :getInstance ()->runScript ("main.js"); 


主要 步骤 就 是 两 步 ， 首 先 获得 创建 脚本 引擎 ， 然 后 调用 JavaSscript 脚 本 引擎 的 runscript 函 数 执行 文件 ， 这 也 是 一 个 Cocos2D-X Javascript 框 架 起 始 的 地 方 。C++ 调 用 Javascript 国 数 的 代码 见 代码 清单 
12-16。 


代码 清单 12-16 C++ 调用 Javascript 国 数 的 代码 


js proxy t * р = jsb get native proxy (nativeObj); 
if (!p) break; 

jsval dataVal[2]; 
dataVal[0] = getJSObject( cx, touch); 


dataVal[1] = getJSObject( cx, event); 
if (jsvalRet != nullptr) 
{ 

ret = 


executeFunctionWithOwner (OBJECT TO JSVAL(p-»obj), funcName.c str(), 
2, dataVal, jsvalRet); 


ScriptingCore 类 负责 在 C+ + 中 执行 JavaScript， 它 包括 的 函数 见 表 12-4。 


表 12-4 SctiptingCore 类 相关 函数 


名 


ER 


executeGlobalFunction 


executeFunction WithOwner 


executeScriptFile 


executeFunctionWithObjectData 


runScript 


sendEvent 


executeString 


12.5.2 ” JavaScript 调 用 C++ 


将 一 个 C++ 类 暴露 给 JavaScript 需 要 在 C++ 中 进行 注 


代码 清单 12-17 = 


&SimpleAudioEngine 


， 注 册 的 方法 见 代码 清单 12-17。 


JA T AS ERG 
TAA TERZA 


执行 文件 


TA TERZA, f AC 


执行 脚本 


执行 事件 
传人 字符 串 ， 


执行 字 


X 4488 АУРА 


void js register cocos2dx SimpleAudioEngine (JSContext *cx, 
JSObject *global) { 
jsb CocosDenshion SimpleAudioEngine class = 
(JSClass *)calloc(1, sizeof(JSClass)); 
jsb CocosDenshion SimpleAudioEngine class-»name - "AudioEngine"; 
jsb CocosDenshion SimpleAudioEngine class-»addProperty = 
JS PropertyStub; 
jsb CocosDenshion SimpleAudioEngine class-»delProperty = 
JS DeletePropertyStub; 
jsb CocosDenshion SimpleAudioEngine class-»getProperty = 
JS PropertyStub; 
jsb CocosDenshion SimpleAudioEngine class-»setProperty = 
| 9S StrictPropertyStub; i 
jsb CocosDenshion SimpleAudioEngine class-»enumerate = 
75 EnumerateStub; 
jsb CocosDenshion | SimpleAudioEngine class-»resolve = 
JS ResolveStub; 
jsb CocosDenshion SimpleAudioEngine class-»convert - 
JS ConvertStub; 
jsb CocosDenshion SimpleAudioEngine class-»finalize = 
js CocosDenshion SimpleAudioEngine finalize; 
jsb CocosDenshion SimpleAudioEngine class->flags = 
JSCLASS HAS RESERVED SLOTS (2); 
static JSPropertySpec properties[] = { 
(" nativeObj", ", 0, JSPROP ENUMERATE | JSPROP PERMANENT, 
JSOP WRAPPER (js is native obj), JSOP NULLWRAPPER), 
(0, 0, 0, JSOP | NULLWRAPP! ER, J SOP NULLWRAPPER) 
E 
/ / 
注册 函数 
static JSFunctionSpec funcs[] = { 
JS FN("preloadMusic", 
js cocos2dx SimpleAudioEngine preloadBackgroundMusic, 
1, JSPROP PERMANENT | JSPROP ENUMERATE), 
JS FN("stopMusic", 
js cocos2dx SimpleAudioEngine stopBackgroundMusic, 0, 
JSPROP PERMANENT | JSPROP ENUMERATE), 
JS FN("stopAllEffects", 
js cocos2dx SimpleAudioEngine stopAllEffects, 0, 
JSPROP PERMANENT JS PROP ENUM ERATE), 
JS FN("getMusicVolume" 
js cocos2dx SimpleAudioEngine getBackgroundMusicVolume, 0, 
JSPROP PERMANENT JS PROP ENUM ERATE), 
JS FN("resumeMusic", 
js cocos2dx SimpleAudioEngine resumeBackgroundMusic, 0, 
JSPROP PERMANENT JS PROP ENUM ERATE), 
JS FN("setMusicVolume" 
js cocos2dx SimpleAudioEngine setBackgroundMusicVolume, 1, 
JSPROP PERMANENT JS PROP ENUM ERATE), 
JS FN("preloadEffect", 
js cocos2dx SimpleAudioEngine preloadEffect, 1, 
JSPROP PERMANENT JSPROP ENUMERATE) Р. 
JS FN("isMusicPlaying",  . 
js cocos2dx SimpleAudioEngine isBackgroundMusicPlaying, 0, 
JSPROP PERMANENT JSP ROP ENUM ERATE), 
JS FN("getEffectsVolume", 
js cocos2dx SimpleAudioEngine getEffectsVolume, 0, 
JSPROP PERMANENT JSPROP ENUMERATE) $ 
JS FN("willPlayMusic" 
js cocos2dx SimpleAudioEngine willPlayBackgroundMusic, 0, 
JSPROP PERMANENT | JSPROP ENUMERATE), 
JS FN("pauseEffect", js cocos2dx SimpleAudioEngine pauseEffect, 1, 
JSPROP PERMANENT | JSPROP ENUMERATE), B 
JS FN("playEffect", js cocos2dx SimpleAudioEngine playEffect, 1, 
JSPROP PERMANENT JSPROP ENUMERATE), 
JS FN("rewindMusic", 
js cocos2dx SimpleAudioEngine rewindBackgroundMusic, 0, 
JSPROP PERMANENT JSPROP ENUMERATE) F 
JS FN("playMusic", js cocos2dx SimpleAudioEngine playBackgroundMusic, 1, 
JSPROP PERMANENT JSPROP ENUMERATE), i 
JS FN("resumeAllEffects" 
js cocos2dx SimpleAudioEngine resumeAllEffects, 0, 
JSPROP PERMANENT JS PROP ENUM ERATE), 
JS FN("setEffectsVolume", 
js cocos2dx SimpleAudioEngine setEffectsVolume, 1, 
JSPROP PERMANENT JSPROP ENUMERATE) ř 
JS FN("stopEffect", js cocos2dx SimpleAudioEngine stopEffect, 1, 
JSPROP PERMANENT JSPROP ENUMERATE), Е 
JS FN("pauseMusic", js cocos2dx SimpleAudioEngine pauseBackgroundMusic, 
JSPROP PERMANENT | JSPROP ENUMERATE), i 
JS FN("pauseAllEffects", 
js cocos2dx SimpleAudioEngine pauseAllEffects, 0, 
JSPROP PERMANENT JS PROP ENUM ERATE), 
JS FN("unloadEffect", js cocos2dx SimpleAudioEngine unloadEffect, 
JSPROP PERMANENT | JSPROP ENUMERATE), С 
JS FN("resumeEffect", js cocos2dx SimpleAudioEngine resumeEffect, 
JSPROP PERMANENT | JSPROP ENUMERATE), i 
JS FS END 
E 
static JSFunctionSpec st funcs[] = { 
JS FN("end", js cocos2dx SimpleAudioEngine end, 0, 
JSPROP PERMANENT | JSPROP ENUMERATE) 7 Е 
JS FN("getInstance", Е 
js cocos2dx SimpleAudioEngine getInstance, 0, 
JSPROP PERMANENT | JSPROP ENUMERATE), 
JS FS END i 
E 
jsb CocosDenshion SimpleAudioEngine prototype = JS InitClass( 


0, 


cx, global, 


NULL, 

jsb CocosDenshion SimpleAudioEngine class, 

empty constructor, 0, 

properties, 

funcs, 

NULL, 

st funcs); 

TypeTest«CocosDenshion::SimpleAudioEngine» t; 

js type class t *p; 

std::string typeName = t.s name(); 

if ( js global type map.find(typeName) == 
js global type map.end()) 


р = (js type class t *)malloc(sizeof(js type class t)); 
p-»jsclass = jsb CocosDenshion SimpleAudioEngine class; 
p-»proto = jsb CocosDenshion SimpleAudioEngine prototype; 
p-»parentProto = NULL; 
js global type map.insert(std::make pair(typeName, p));] 


>F 


这 个 方法 十 分 复杂 ， 但 是 代码 并 不 需要 手动 编写 ， 只 需要 工具 生成 ， 工 具 的 使 用 及 配置 方式 和 Lua 绑 定 一 样 ， 第 11 章 已 经 介绍 过 ， 这 里 就 不 蓝 述 。 


生成 的 函数 通过 ScriptingCore 注 册 ， 见 代码 清单 12-18。 


代码 清单 12-18 ”通过 ScriptingCore 注 册 


ScriptingCore* sc = ScriptingCore::getInstance(); 
sc-»addRegisterCallback (register all сосоѕ2ах); 


12.6 本章 小 结 


未 来 的 跨 平 台 技 术 有 三 种 方式 ， 包 括 本 地 应 用 、HTML5 和 混合 方式 。 这 几 种 各 有 干 秋 ， 而 使 用 Cocos2D 系 列 引擎 可 以 完全 实现 这 三 种 方式 ， 开 发 者 可 以 轻松 选择 并 且 不 需要 付出 学 习 成 本 。 


本 章 介绍 Cocos2D 的 一 个 最 新 分 支 Cocos2D-JS， 结 合 Cocos2D-HTML5 和 Cocos2D-X 的 Javascript 绑 定 ， 可 以 使 用 Cocos2D 引 警 的 概念 开发 网 页 游戏 ， 而 HTML5 的 新 特性 也 将 有 助 于 开发 者 开发 出 很 
好 的 游戏 。 本 章 基 于 Cocos2D-HTML52.0 从 环境 搭建 到 程序 的 基本 结构 介绍 Cocos2D-HTML5， 学 习 本 章 可 以 对 Cocos2D-HTML5 有 一 个 初步 的 认识 和 了 解 ， 并 且 学 习 Javascript 与 C++ 的 绑 定 。 


第 13 章 游戏 中 常用 算法 在 Cocos2D-X 中 的 实现 
在 游戏 开发 中 除了 要 对 开发 语言 、 设 计 模式 等 知识 烂熟 于 心 ， 还 要 对 游戏 开发 中 的 算法 以 及 数学 和 物理 知识 有 所 了 解 。 在 游戏 中 使 用 人 工 智能 可 以 增加 游戏 的 可 玩 性 ， 比 如 棋牌 类 游戏 中 的 对 手 、 动 作 


类 游戏 中 的 怪物 等 ， 本 章 就 介绍 游戏 中 常用 算法 的 实现 。 


数学 和 物理 知识 对 于 游戏 开发 程序 员 来 说 是 不 可 或 缺 的 ， 不 需要 精通 ， 只 需要 掌握 游戏 中 经 常用 到 的 数学 、 物 理 知识 即 可 。 本 章 介绍 A 星 算法 和 碰撞 检测 知识 ， 并 将 这 些 知 识 转 化 为 Cocos2D-X 实 现 的 


在 游戏 中 让 敌人 运动 起 来 是 件 很 容易 的 事情 ， 既 可 以 采用 设置 坐标 的 位 置 的 方法 ， 又 可 以 采用 Cocos2D-X 特 有 的 方法 ， 但 是 有 时 需要 让 敌人 聪明 地 动 起 来 ， 这 时 就 需要 采用 A 星 算法 。 


1311 局 发 式 搜索 算 法 原理 


A 星 算法 在 人 工 智能 中 是 一 种 典型 的 启发 式 搜索 算法 ， 解 决 一 个 搜索 问题 的 过 程 就 是 从 开始 位 置 点 经 过 每 一 个 过 程 位 置 点 到 目标 位 置 点 的 过 程 ， 这 些 点 构成 了 一 个 图 的 数据 结构 ， 这 个 图 就 是 状态 空 
间 ， 在 这 些 点 中 找到 一 条 路 径 的 过 程 就 是 “状态 空间 搜索 ”。 


一 般 情 况 下 ， 我 们 使 用 的 状态 空间 搜索 方式 分 为 深度 优先 和 广度 优先 两 种 。 广 度 优先 是 从 初始 点 一 层 一 层 向 下 找 ， 直 到 找到 目标 为 止 。 深 度 优先 是 按照 层 的 顺序 先 搜索 完成 一 个 分 支 ， 再 搜索 另 一 个 分 
直到 找到 目标 为 止 。 当 过 程 中 的 点 过 多 时 ， 无 论 是 深度 优先 搜索 还 是 广度 优先 搜索 ， 都 会 使 得 搜索 的 效率 降低 ， 因 此 需要 使 用 启发 式 搜索 算法 。 


К} 


启发 式 搜索 就 是 在 状态 空间 图 中 对 每 一 个 搜索 的 位 置 点 进行 评估 ， 得 到 评估 值 更 优 的 位 置 点 ， 逐 个 对 位 置 点 评估 直到 目标 。 启 发 中 的 估价 用 估价 函数 表示 。 
f (n) =р (n) +h (n) 

各 函数 表示 的 具体 含义 如 下 。 

-f (а) : 节点 a 的 估价 函数 。 

-g (а) : 在 状态 空间 中 从 初始 位 置 点 到 第 n 个 位 置 点 的 实际 代价 。 

Б (n) : 从 n 到 目标 节点 最 佳 路 径 的 估计 代价 。 

h (n) 体现 了 搜索 的 启发 信息 。 在 启发 式 搜索 中 ， 对 位 置 的 估价 ， 也 就 是 h (n) 是 十 分 重要 的 。 

采用 不 同 的 估价 可 以 有 不 同 的 搜索 结果 ， 这 也 是 启发 式 搜索 算法 中 最 重要 的 部 分 。 启 发 式 搜索 包括 局 部 择优 搜索 法 、 最 好 优先 搜索 、A 星 搜索 等 算法 。 


* 局 部 择优 搜索 : 在 搜索 过 程 中 的 每 一 步 选取 最 佳节 点 ， 然 后 舍弃 其 他 的 兄弟 节点 和 父亲 节点 ， 而 一 直 得 搜索 下 去 。 因 为 求解 的 最 佳节 点 只 是 在 该 步骤 的 时 候 的 最 佳 并 不 一 定 是 全 局 的 最 佳 而 没有 回 
湖 ， 因 此 最 佳 点 有 可 能 会 在 过 程 中 被 舍弃 了 。 


最 好 优先 搜索 : 没有 舍弃 节点 〈 死 节点 除外 ) ， 在 每 一 步 的 估价 中 都 把 当前 节点 和 以 前 节点 的 估价 值 比较 得 到 一 个 “最 佳节 点 ”。 这 样 可 以 有 效 地 防止 “最 佳节 点 ”的 丢失 。 


АЯЛ Ж: 在 搜索 的 时 候 能 够 利用 启发 式 信息 ， 智 能 地 调整 搜索 策略 。 


13.1.2 (АВА Ж 


A 星 搜索 是 一 种 迭代 的 有 序 搜索 ， 它 维护 一 个 状态 空间 的 开放 集合 ， 在 每 次 迭代 时 ，A 星 搜索 使 用 一 个 评价 函数 位 (n) 评价 点 集合 中 各 个 邻接 点 的 状态 ， 选 择 最 小 的 代价 ， 直 到 到 达 终 点 为 止 。 定 义 如 


下 。 


其 中 各 遂 数 表示 的 具体 合 义 如 下 。 


“gt (n) : 从 初始 状态 到 第 n 点 的 最 短路 径 。 


/* (п) =g* (п) +h* (п) 


| h* (n) : 从 第 n 点 到 目标 点 的 估算 代价 ， 注 意 这 个 值 并 不 是 一 个 真实 值 ， 而 是 一 个 估计 值 。 


Е (n) : 到 目前 这 个 选 代 阶 段 估 算 的 从 初始 ， 


以 得 到 一 个 “最 优 路 径 ”。 


点 ， 经 


过 


第 n 点 到 达 目 标点 的 预计 值 ， 将 这 个 值 与 之 前 的 迁 代 值 比较 ， 便 可 以 得 出 第 n 个 点 是 否 应 该 在 “最 优 路 径 ” 中 ， 当 选 代 进 行 到 目标 点 的 时 候 ， 便 可 


总 体 来 说 ，A 星 算法 的 步骤 就 是 从 起 始点 开始 迭 代 ， 下 次 和 迭代 从 目前 点 的 周围 点 进行 迭代 ， 返 代 到 某 一 个 点 的 时 候 ， 算 出 目前 点 的 作 (n) ， 和 周围 点 的 f+ (n) ， 每 次 保留 最 小 的 ft (n) ， 也 就 是 最 小 
的 耗 散 ， 不 断 迭 代 直 到 运 代 到 终点 为 止 ， 也 就 是 确定 搜索 区 域 ， 再 开始 搜索 并 评估 们 (n) 值 ， 直 到 终点 为 止 。 


A 星 算法 伪 代 码 见 代码 清单 13-1。 


代码 清单 13-1 


人 A 星 算法 伪 代 码 


13.1.3 ”人 星 算法 在 Cocos2D-X 中 的 实现 


代码 清单 13-2 Atarltem 类 的 定义 


AstarSearch 
(开始 点 ， 目 标点 ) 


加 close 
ЎЗА 


4v 


ге 


点 是 目标 点 ) 
return 


foreach 


Em 
点 在 全 部 点 集合 


next = 


(next.f() < 
之 前 列表 中 m 


表 删 除 之 前 的 记录 ， 在 open 
列表 中 加 入 新 的 记录 。 
} 


else 
在 open 
Анан: 


搜索 过 程 中 设置 两 个 表 。 
.open 表 保 存 所 有 已 生成 而 未 考察 的 点 。 


: close 列表 中 记录 已 访问 过 的 节点 。 


A 星 算法 的 每 一 步 是 根据 估价 函数 位 () 重 排 open 列 表 。 因 此 每 一 步 只 考虑 open 表 中 耗费 最 小 的 节点 。 


根据 之 前 的 介绍 ， 程 序 的 流程 可 以 分 为 如 下 几 步 。 


1) 有 一 个 open 表 ， 一 个 close 表 ，open 表 首先 存储 起 点 ， 然 后 由 此 出 友 。 


2) 把 起 点 放 入 close 列 表 ， 并 检测 这 点 周围 点 的 值 (g+h，h 通 过 本 点 到 终点 的 横 纵 索引 差 估 计 而 来 ) 。 


3) 把 剩 下 的 点 放 入 open 列 表 中 ， 并 根据 f 值 进行 推 排序 。 


4) 把 f 值 最 小 的 点 放 入 close 列 表 中 。 


5) 继续 上 面 的 循环 ， 继 续 处 理 ， 直 到 找到 终点 为 止 。 


当然 ， 还 要 根据 游戏 做 一 些 处理 ， 例 如 处 理 地 图 中 的 碰撞 等 ， 我 们 要 让 人 物 绕 过 碰撞 。 


首先 创建 A 星 算法 中 每 个 节点 的 信息 的 类 ， 这 里 叫做 Atarltem 类 ， 该 类 的 定义 见 代 码 清单 13-2。 


fpragma once 


#include "cocos2d.h" 
using namespace сосоѕ2а; 
class Astarltem:public Ref 
{ 
рир11с: 
Astarltem (void); 
^Astarltem (void); 


/ / 
私有 变量 的 set/get 
void setpos(int col,int row); 
int getcol() {return id col;); 
int getrow() {return id row;}; 
void setg(int ад); 
int getg() (return id g;}; 
void seth(int h); 
int geth()(return id h;}; 
void setfid(int fid); 
int getfid()(return id fid;}; 
void setf(int f); 
int getf()(return id f;}; 
private: 
int id col;// 
5j 
int id row;// 
fT 
int id g;// 
实际 代价 
int id hz// 
估计 代价 
int id fid;// 
父 节点 id m 
int id f:// 


估价 函数 E = 9 + h 
因为 之 后 使 用 Astarltem 类 的 对 象 时 ， 要 把 这 些 对 象 放 入 Cocos2D-X 的 Array 数 组 里 ， 但 是 要 将 对 象 放 入 Array 数 组 里 ， 这 个 对 象 必须 实现 retain 和 release 等 内 存 管理 函数 ， 这 里 让 Astarltem 类 继承 自 
Ref 类 ， 这 样 就 可 以 在 Array 数 组 里 人 存 取 Astarltem 类 了 。 


Astarltem 类 存储 了 该 点 的 行列 值 id_col 和 id_row， 该 节点 的 父 节 点 ID 号 为 int id_fid， 该 节点 的 估价 函数 为 id_f， 其 中 包括 实际 代价 id_g 和 估计 代价 id_h。 这 里 的 函数 均 为 存 取 函 数 ， 其 实现 代码 见 代 码 
清单 1 3-3。 


代码 清单 13-3 ”Astarltem 类 的 实现 


dinclude "Astaritem.h" 
AstarlItem::AstarlItem(void) 


{ 


AstarlItem::-AstarlItem(void) 


void Astarltem::setpos (int col,int row) 


col; 
row; 


id col 
id row 


void AstarItem: :setg (int g) 
id g = g; 


void AstarItem::seth (int h) 


idh = һ; 


void AstarIlItem::setfid(int fid) 


id fid = fid; 


void AstarIlItem::setf(int f) 


та cen 


A 星 算法 的 具体 实现 在 Astar 类 中 ， 其 定义 方式 见 代 码 清单 13-4。 


代码 清单 13-4 Astar 类 的 定义 


#pragma once 
#include "сосоѕ2а.Һ" 
#include "AstarItem.h" 
using namespace cocos2d; 
class Astar 
{ 
private: 
int curCol, curRow, aimCol, aimRow; 
int AimX, AimY, AimW, AimH; 
TMXTiledMap* map; 
Array *open; 
© Array *close; 
| Array *path; 
public: 
Astar (void); 
^Astar (void); 


int getG(int col,int row,int id); / / 
获得 g О 

int getH(int col,int row); // 
获得 h () 

void fromopentoclose (); /7. 
将 close 
列表 中 的 元 素 导 入 到 close 
列表 中 

void removefromopen (); // 
从 open 
列表 中 删除 元 素 

void getpath(); 好 
获得 整个 路 径 

void starseach(int fid); // 
搜索 

void resetSort (int last); / / 
排序 

bool checkclose (int col,int row); // 
检查 close 
列表 

void addtoopen(int col,int row,int id); / / 
向 open 
列表 中 添加 元 素 

bool checkmap (int col,int row); // 
检查 地 图 

bool checkOpen(int col,int row,int id); / / 
检查 open 
列表 

Array *findPath(int curX, int curY, int aimX, int aimY, 


TMXTiledMap* passmap); // 
入 口 函数 


其 中 包括 当前 的 行列 值 curCol 和 curRow、 目 标的 行列 值 aimCol 和 aimRow、 地 图 map 以 及 open 列 表 和 close 列 表 ， 还 包括 路 径 path 数 组 ， 具 体 的 函数 功能 会 在 后 面 的 实现 中 详细 介绍 。 


A 星 算法 的 入 口 函数 findPath 见 代码 清单 13-5。 


代码 清单 13-5 “函数 findPath 的 实现 


. Array *Astar::findPath(int curX, int curY, int aimX, int aimY, TMXTiledMap* passmap) 


{ 
// 
参数 以 及 记录 路 径 数组 初始 化 


curCol = curX; 
curRow = curY; 
aimCol = aimX; 
aimRow = aimY; 
map — passmap; 
path =  Array::create(); 


open =  Array::create(); 

Astarltem * temp new Astarltem(); 
open-»addObject (temp) ; 

AstarlItem * templ new Astarltem(); 
templ-»setpos (curCol,curRow); 
templ-»setg (0); 
int ag = getH(curCol,curRow); 
templ-»seth (ag); 
templ-»setfid(0); 

templ-»setf (ag); 
open-»addObject (templ) ; 

close =  Array::create(); 


// 
遍历 寻找 路 径 

while (open-»count() > 1) { 
fromopentoclose();// open 


和 close 
列表 管理 
int fatherid = close->count() - 1; 
int coldelta = abs(aimCol - ((AstarItem *)close 
-»getObjectAtIndex (fatherid))-»getcol()); 
int rowdelta = abs(aimRow - ((AstarlItem *)close 
-»getObjectAtIndex (fatherid))-»getrow()); 


if(coldelta <= 1 && rowdelta <= 1){ 
getpath(); 
break; 

}else{ 

[Уу 


搜索 


starseach(fatherid); 
} 
} 


open-»removeAllObjects(); 


close-»removeAllObjects (); 
// 

获得 路 径 
if(path-»count() == 0) { 


Astarltem * temp new Astarltem(); 
temp-»setpos (aimCol,aimRow); 
path-»addObject (temp) ; 

return path; 


Jelse( 
if(((Astarltem *)path-»getLastObject())-»getcol() !- 
aimCol ((AstarlItem *)path-»getLastObject ()) 
-»getrow() != aimRow) { 
Astarltem * temp new Astarltem(); 


temp-»setpos (aimCol,aimRow); 
path-»addObject (temp) ; 


) 


return path; 


该 国 数 首 先是 初始 化 行列 值 curCol 和 curRow、 目 标的 行列 值 aimCol 和 aimRow、 地 图 map、open 列 表 、close 列 表 和 路 径 path 数 组 这 些 变量 ， 然 后 就 是 迭代 过 程 。 


首先 调用 fromopentoclose 函 数 ，fromopentoclose 的 具体 实现 见 代码 清单 13-6。 


代码 清单 13-6 ”fromopentoclose 函 数 实现 


void Astar::fromopentoclose|() 


{ 
// 
把 open 
列表 中 的 点 放 到 close 
列表 中 


Astarltem * temp = (AstarItem *)open-»getObjectAtIndex (1); 
close-»addCbject (temp); 
open-»removeObjectAtIndex (1); 


在 open 列 表 中 将 最 后 一 个 对 象 蔡 换 到 第 一 个 对 象 的 位 置 ， 然 后 删除 最 后 一 个 对 象 ， 之 后 对 open 列 表 进 行 堆 排 序 ， 堆 排序 把 整个 数组 想象 成 一 个 树 ， 整 个 排序 就 是 父 节点 比 子 节点 的 f 函 数值 小 ， 从 而 将 f 
值 最 小 的 值 排 在 前 面 。 


从 这 里 可 以 看 出 ， 为 什么 要 把 open 列 表 中 第 0 个 元 素 空 出 来 ， 因 为 堆 排 序 时 需要 根据 父 元 素 获 得 子 节点 元 素 才 进 行 堆 排序 ， 公 式 为 “head*2” ， 由 于 0 乘 以 任何 值 还 是 0， 因 此 这 里 将 第 0 个 位 置 空 出 
来 。 


在 findPath 函 数 中 调用 fromopentoclose 函 数 之 后 ， 判 断 是 否 迭 代 到 目标 点 。 如 果 人 迭代 到 目标 点 ， 调 用 getpath 函 数 获得 路 径 并 返回 路 径 ， 否 则 调用 starseach 函 数 继续 A 星 搜索 。starseach 函 数 见 代码 
清单 13-7。 


代码 清单 13-7 starseach 函 数 实 现 


void Astar: :starseach (int fid) 


int col = ((AstarlItem *)close->getObjectAtIndex (fid))-»getcol () 
int row = ((Astarltem *)close-»getObjectAtIndex (fid))-»getrow() 


搜索 目前 点 的 上 下 左右 四 个 方向 

int mycol = col; 

int myrow = row - 1; 

if(myrow >= 0 && checkmap (mycol, тугом) ) { 
f (checkOpen (mycol,myrow,fid) && 
checkclose (пусоі, тугом) ) { 
addtoopen (mycol, тугом, fid); 


] 


M. м» 


H- 


} 

mycol = col - 1; 

myrow = row; 

if(mycol >= 0 && checkmap (mycol, myrow))í( 
f (checkOpen (mycol,myrow,fid) && 
checkclose (пусоі, тугом) ) { 


H- 


checkmap (mycol,myrow) ) { 


addtoopen (mycol,myrow, fid); 
} 
} 
mycol = col; 
myrow = row + 1; 
if(myrow < map-»getMapSize().width && 
if (checkOpen (mycol,myrow,fid) && 
checkclose (пусоі, тугом) ) { 
addtoopen (mycol, тугом, fid); 


) 


} 


mycol = col 
myrow — row; 
if 


H 


} 


+17 


‚ туго\/, 1 


L myrow) ) { 


fid 


fid) 


&& 


); 


f(mycol < map-»getMapSize().height && checkmap (mycol,myrow))í 
if (checkOpen (myco] 
checkclose (mycol 
addtoopen (mycol,myrow, 1 


该 函数 是 从 目前 的 点 检查 四 周 的 节点 。 首 先 检 测 是 否 到 达 地 图 的 边界 ，checkmap 函 数 见 代 码 清单 13-8。 


代码 清单 13-8  checkmapERZA SEE 


bool Astar::checkmap(int col int row) 


{ 


// 
ЖУ ЖЕНЫ Р rp EnA ШИШ 

// if(abs(aimCol - col) > 1 || abs(aimRow - row) > 1){ 
TMXLayer* layer = map-»getLayer ("grass"); 
int tilegid = layer-»getTileGIDAt (Point (col, row)); 
auto tiledic = map-»getPropertiesForGID(tilegid); 
int mv = tiledic.asValueMap() ["conflict"].asInt(); 
if(mv == 1){ 

return false; 

} 

// } 


> 


return true; 


获得 该 位 置地 图 上 的 grass 层 的 conflict 属 性 值 ， 如 果 是 碰撞 不 能 通过 的 位 置 则 返回 false， 否 则 返回 true。 


接 下 来 分 别 检 查 open 列 表 和 close 列 表 ，checkclose 国 数 和 checkOpen 函 数 见 代码 清单 13-9。 


代码 清单 13-9 “checkclose 函 数 和 checkOpen 函 数 实现 


bool Astar::checkclose(int col,int row) 


{ 


// 


检查 close 


列 


} 


AX 


or (in 


t i= 


e 


} 


if(((As 


сагі 
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( (As 
re 


сагі 
curn 


fa 
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lse; 


} 


return true; 


tObjec 


СА 


tObjec 


СА 


bool Astar::checkOpen(int col,int row,int id) 


Index (i))-»ge 
Index (1) ) ->деігом () 


ose-»count() - 1;i > 0;i --) { 
lose-»ge 
lose-»ge 


tcol() 


// 
检查 open 
列表 中 是 否 有 更 小 的 步 长 ， 并 排序 
for(int i = open-»count() - 1;i > 0;i --)f{ 
if(((Astarltem *)open-»getCbjectAtIndex (i))-»getcol () 

== col && ((AstarlItem *)open-»getObjectAtIndex (i)) 

-»getrow() == гом) { 

int tempG = getG (col, гом, іа); 

if(tempG < ((Astarltem *) ореп 
-»getObjectAtIndex (1)) ->деёба ()) { 
((Astarltem *) ореп 
-»getObjectAtIndex (i))-»setg (tempG) ; 
((Astarltem *)open 
-»getObjectAtIndex (i))-»setfid(id); 
((Astarltem *)open 
-»getObjectAtIndex (i))-»setf (tempG 
+ ((AstarlItem *)open 
-»getObjectAtIndex (i))-»geth()); 
resetSort (i); 

} 

return false; 


checkclose 函 数 检 测 该 节 


} 


} 


return true; 


现 见 代码 清单 1 3- 1 0。 


点 


VAN 


代码 清单 13-10 ”getG 函 数 的 实现 


int Astar::getG(int col,int row,int id) 


{ 


// 
获得 该 点 的 g 
函数 值 
int fx = ((AstarItem *)close-»getObjectAt 
int fy = ((AstarItem *)close->getObjectAt 
int fg = ((AstarItem *)close->getObjectAt 
if (fx - col != 0 && fy - row != 0){ 
return fg + 14; 
}else{ 
return fg + 10; 


xetifEclose2lz&rn, сһескОреп# 115 


点 


VAN 


Index (id))-»ge 


Index (id))-»ge 


Index (id))-»get 


col && 
row) { 
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如 果 检 测 到 这 条 路 径 比 之 前 记录 的 到 本 节点 的 路 径 耗 费 更 短 ， 则 改变 在 open 列 表 中 的 存储 值 ， 调 用 addtoopen 将 对 象 加 入 到 open 列 表 中 。addtoopen 函 数 的 实现 见 代 码 清单 13-11。 


代码 清单 13-11 


addtoopen 函 数 的 实现 


void Astar::addtoopen(int col,int row,int id) 


{ 


// 


向 open 
列表 中 加 入 点 

AstarItem * temp new Astarltem(); 
temp-»setpos (col, row); 
temp-»setfid (id); 
int g = getG(col, row, id); 
int h = getH(col, row); 
temp-»setg (9); 
temp-»seth (h); 
temp-»setf(g + h); 
open-»addObject (temp) ; 
resetSort (open-»count() - 1); 


ДАТА AAMAR ВПР ЕА, ERirhngeRzXR(EuBgetGBERgZDATSTHNIBI[BE. getGERZXRgscqmn (Ris ER 13-12, 
代码 清单 13-12 getG 函 数 的 实现 


int Astar::getH(int col,int row) 


{ 


// 
获得 该 点 的 h 
й 


} 


return abs(aimCol - col) * 10 + abs(aimRow - row) * 10; 


open 列 表 中 加 入 新 的 对 象 以 后 ， 调 用 resetSort 进 行 重新 排序 。resetSort 函 数 的 实现 见 代 码 清单 13-13。 


代码 清单 13-13 ”resetSort 函 数 的 实现 


void Astar::resetSort(int last) 


{ 
// 
根据 步 长 排序 ， 堆 排序 


while(last > 1){ 
int half = last / 2; 
if(((Astarltem *)open-»getObjectAtIndex (half))-»getf() <= 
((AstarlItem *)open-»getObjectAtIndex (last))-»getf ()) 
break; 


open-»exchangeObjectAtIndex (half,last); 
last = half; 


完成 搜索 后 ， 调 用 相应 的 getpath 函 数 获得 整个 A 星 搜索 搜索 的 路 径 ， 存 入 path 数 组 中 。getpath 函 数 的 实现 见 代 码 清单 13-14。 
代码 清单 13-14 getpath 函 数 的 实现 


void Astar::getpath() 


// 
从 整个 close 
数组 中 找 出 路 径 
curCol = aimCol; 
curRow = aimRow; 
if(close-»count() == O)Í 
Astarltem * temp = new Astarltem(); 
temp-»setpos (aimCol,aimRow); 
path-»addaObject (temp) ; 
return; 


p. ~ 一 


f(path-»count() == 0) { 
path-»addaObject (close 
-»getObjectAtIndex(close-»count() - 1)); 
Jelse( 
path-»insertObject (close 
-»getObjectAtIndex(close-»count() - 1),path-»count() - 1); 
} 
while (true)(í 
if(((Astarltem * 
->getg() == 0) 
break; 
} 
path-»insertObject (close-»getObjectAtIndex (((AstarItem 
*)path-»getObjectAtIndex (0))-»getfid()),0); 


)path-»getObjectAtIndex (0)) 
{ 


getpath 函 数 将 close 列 表 中 的 整个 路 径 放 入 path 数 组 中 ， 最 后 findPath 函 数 返 回 path 数 组 ， 返 回 整个 路 径 。 


A 星 算法 的 逻辑 部 分 基本 完成 。 任 何 一 个 算法 要 在 游戏 开发 过 程 中 使 用 ， 需 要 有 特定 的 场景 ， 这 里 设 定 一 个 简单 的 场景 : 在 45 度 角 地 图 中 ， 主 角 需 要 绕 过 树 到 达 点 击 的 目的 点 。 下 面 就 介绍 这 个 程序 的 
实现 ， 其 中 在 用 户 点 击 地 图 某 点 时 ， 程 序 会 调用 A 星 搜索 算法 来 计算 出 一 个 路 径 。 


首先 ， 定 义 一 个 布景 层 MapScene 放 入 场景 中 ，MapScene 布 景 层 的 初始 化 函数 init 见 代码 清单 13-15。 
代码 清单 13-15 ”MapScene 的 布景 层 的 init 函 数 的 实现 


bool MapScene::init() 


{ 


бы; 


Е ( !Layer::init() ) 


{ 


return false; 


} 


// 
初始 化 地 图 
TMXTiledMap *map = TMXTiledMap: :create ("iso-test-zorder.tmx"); 
addChild (map, 0, kTagTileMap); 
Size s = map-»getContentSize(); 
Size winSize = Director::getInstance()-»getVisibleSize(); 
map-»setPosition (Point(-s.width/2 + winSize.width/2,0)); 


| // 
初始 化 人 物 
m tamara = CCSprite::create("grossinis sisterl.png"); 


ар->ааасһі1а (т tamara, map-»getChildrenCount() ); 
tamara-»retain(); 


nt mapWidth = map-»getMapSize().width * map-»getTileSize().width; 
| tamara-»setPosition (Point( mapWidth/2,112)); 


m tamara-»setAnchorPoint (Point (0.5f,0)); 
S 


号 | 


heduleUpdate (); 


vmove = -1; 
hmove = -1; 
stepindex = -1; 


myastar = new Astar(); 
auto touchListener = EventListenerTouchOneByOne::create(); 


| touchListener-»setSwallowTouches (false); 
touchListener-»onTouchBegan = 

CC CALLBACK 2 (MapScene::touchBegan, this); 
eventDispatcher 
-»addEventListenerWithFixedPriority( touchListener, -129); 
return true; 


在 该 函数 中 分 别 定义 地 图 和 精灵 等 对 象 定 义 并 初始 化 相应 的 A 星 算法 对 象 ， 点 击 屏 幕 中 的 某 个 位 置 ， 精 灵 就 通过 A 星 算法 寻找 最 佳 路 径 到 达 目 的 点 。 


该 逻辑 部 分 touchBegan 函 数 见 代码 清单 13-16。 


代码 清单 13-16 ”touchBegan 函 数 实现 


bool MapScene::touchBegan(Touch *touch, Event  *event) 


{ 


Point m tBeginPos = touch-»getLocation(); 
TMXTiledMap* map = (TMXTiledMap*) getChildByTag (kTagTileMap); 
Point mapp = map-»getPosition(); 


// 
获得 触摸 点 位 置 在 地 图 上 的 索引 【行列 ) 


Point aimmapindex = convertto2d(m tBeginPos.x 


mapp.x,m tBeginPos.y - mapp.y); 

f(aimmapindex.x « 0 || aimmapindex.y « 0 || aimmapindex.x >= 
map-»getMapSize().width || 
aimmapindex.y >= map-»getMapSize().height) 


H- 


{ 
} 


Point herop = m tamara-»getPosition(); 

Point mapindex = convertto2d (herop.x,herop.y); 
TMXLayer* layer = map-»getlayer ("grass"); 

int tilegid - 
layer-»getTlileGIDAt (Point (aimmapindex.x,aimmapindex.y)); 
auto tiledic = map-»getPropertiesForGID(tilegid); 


return true; 


int mv = tiledic.asValueMap() ["collion"].asInt(); 
if(mv == 1)( 
return true; 


) 
/ 
星 搜索 


path = myastar->findPath 
(mapindex.x,mapindex.y,aimmapindex.x,aimmapindex.y,map); 
path-»retain(); 
stepcount = path-»count 
stepindex - 1; 
smallstepindex - 0; 
return true; 


/A 


— 


)3 


куз. 


该 函数 根据 8.2.3 节 介绍 的 convertto2d 函 数 获得 坐标 值 在 地 图 中 的 行列 值 ， 若 该 地 图 块 是 碰撞 的 点 则 无 须 移动 主角 ， 接 下 来 调用 A 星 算法 中 的 findPath 获 得 整 


获得 路 径 后 则 在 每 帧 更 新 的 update 函 数 中 更 新 主角 的 位 置 ，update 函 数 的 实现 见 代码 清单 13-17。 


代码 清单 13-17 update 逊 数 的 实现 


void MapScene: :update (float dt) 
{ 


Point herop = m tamara-»getPosition(); 
// 
根据 路 径 移 动 
if(stepindex >= 1){ 
if(smallstepindex == 0){ 
int ncol = ((AstarItem *)path 
-»getObjectAtIndex (stepindex))-»getcol(); 
int nrow = ((Astarltem *)path 
-»getObjectAtIndex (stepindex))-»getrow(); 
int pcol = ((Astarltem *)path 
-»getObjectAtIndex(stepindex - 1))-»getcol(); 
int prow = ((Astarltem *)path 
-»getObjectAtIndex(stepindex - 1))-»getrow(); 
if(pcol == ncol)( 
if (prow > пгом) { 
vmove = 2; 
}else if(prow < пгом) { 
vmove = 3; 
}else{ 
vmove = -1; 
} 
}else if (prow == nrow){ 
if(pcol > ncol){ 
vmove = 1; 
}else if(pcol < ncol){ 
vmove = 0; 
}else{ 
vmove = -1; 
}else{ 
if (prow < пгом) { 
if(pcol < ncol)( 
vmove = 6; 
}else if(pcol > ncol)( 
vmove = 5; 
Jelse( 
vmove = -1; 
} 
}else if(prow > пгом) { 
if(pcol < ncol){ 
vmove = 4; 
}else if(pcol > ncol)( 
vmove = 7; 
}else{ 
vmove = -1; 
} 
}else{ 
vmove = -1; 
} 
} 
} 
if (vmove == 0){ 


herop.x += 1; 

herop.y -= 0.5 
}else if(vmove == 1 
herop.x -= 1; 
herop.y += 0.5; 
}else if(vmove == 2){ 
herop.x += 1; 
herop.y += 0.5; 


}else if(vmove == 3){ 
herop.x -= 1; 
herop.y -= 0.5; 

}else if(vmove == 4){ 
herop.x += 2; 

}else if(vmove == 5){ 


herop.x -= 2; 


}е1ве if(vmove == 6){ 
һегор.у —= 1; 

}else if(vmove == 7){ 
herop.y += 1; 


} 

smallstepindex ++; 

if (smallstepindex >= 32) { 
smallstepindex = 0; 

if(stepindex >= stepcount - 1){ 


stepindex - -1; 
vmove = -1; 
path-»release(); 
Jelse( 
stepindex ++; 
vmove = -1; 
} 
} 
} 
m tamara-»setPosition (herop); 
// 
地 图 随 主角 移动 
TMXTiledMap* map = (TMXTiledMap*) getChildByTag (kTagTileMap); 
Size s = map-»getContentSize(); 
int mapWidth = map-»getMapSize().width * map-»getTileSize().width; 
float deltax - herop.x - mapWidth/2; 


Float deltay = herop.y - 112; 
Size winSize = Director::getInstance()-»getVisibleSize(); 
map-»setPosition(Point(-s.width/2 + winSize.width/2 


deltax, -deltay)); 


该 函数 首先 检测 是 否 应 该 更 新 主角 当前 位 置 和 下 一 个 位 置 的 相对 位 置 获得 运动 的 方向 ， 当 到 达 下 一 个 位 置 时 再 进行 这 样 的 操作 ， 直 到 path 路 径 结 束 ， 也 就 是 说 到 达 终 点 时 结束 这 段 移动 。 整 个 程序 的 运 
行 效果 如 图 13-1 所 示 。 


图 13-1 A 星 搜索 项 目 运行 效果 


13.2 ДАА 


无 论 开 发 的 游戏 是 什么 类 型 ， 也 不 管 游戏 是 什么 视角 ， 碰 撞 检 测 都 是 不 可 缺少 的 部 分 ， 比 如 射击 游戏 中 的 击 中 。 碰 撞 检 测 基 于 数学 和 物理 方面 的 知识 ， 本 节 介 绍 碰 撞 检 测 的 基本 算法 思想 和 这 些 思 想 在 
Cocos2D-X 中 的 实现 。 


13.2.1” 础 撞 检 测 的 基本 思想 
在 游戏 对 象 每 帧 的 逻辑 更 新 中 ， 一 般 要 进行 以 下 三 个 步骤 。 
1) 更 新 位 置 ; 
2) 根据 状态 处 理 动画 ; 


3) 根据 状态 处 理 游戏 数值 。 


其 中 在 更 新 位 置 部 分 需要 进行 碰撞 检测 ， 如 果 检 测 碰 到 了 需要 进行 处 理 ， 进 行 碰撞 检测 首先 要 确定 碰撞 的 对 象 ， 因 为 无 天 的 游戏 对 象 检测 碰撞 会 降低 游戏 的 运行 效率 ， 比 如 主角 无 须 和 自己 发 出 的 子弹 
进行 碰撞 检测 。 


进行 碰撞 检测 需要 记 住 以 下 几 个 原则 。 


‚ 静止 的 物体 不 需要 进行 碰撞 检测 。 当 需要 检测 运动 的 物体 和 静止 的 物体 碰撞 时 ， 碰 撞 检 测 应 该 放 在 运动 的 物体 上 ， 因 为 一 般 游 戏 由 一 个 运动 的 主角 和 许多 运动 的 物体 构成 ， 把 检测 放 在 运动 的 物体 上 
可 以 有 效 地 节约 效率 。 


距离 远 的 物体 无 须 检测 。 一 般 当 需要 检测 运动 的 物体 和 静止 的 物体 碰撞 时 ， 相 隔 较 远 时 无 须 进 行 详细 的 检测 。 
进行 碰撞 检测 可 以 有 两 种 办 法 : 矩形 碰撞 检测 和 圆 形 碰撞 检测 。 
矩形 碰撞 检测 是 最 常用 的 碰撞 检测 ， 也 称 边界 检测 ， 它 是 将 要 检测 的 游戏 对 象 看 成 一 个 矩形 区 域 ， 然 后 检测 各 自 和 矩形 的 碰撞 。 和 矩形 碰撞 检测 示意 图 如 图 13-2 所 示 。 


如 图 13-2 所 示 ， 德 形 1 和 和 矩形 2 碰撞 ， 需 要 在 和 矩形 上 找到 一 点 ， 只 要 B 点 的 横 坐 标 在 A 点 的 横 坐 标 与 A 点 横 坐 标 与 矩形 1 宽 之 和 之 间 ， 并 且 B 点 的 纵 坐 标 在 A 点 的 纵 坐 标 与 A 点 纵 坐 标 与 矩形 1 长 之 和 之 间 ， 那 
么 两 个 矩形 必然 碰撞 。 


圆 形 碰 撞 检 测 如 图 13-3 所 示 。 


A Я 


图 13-2 ”矩形 碰撞 检测 示意 图 


圆 形 :1 


图 13-3” 圆 形 碰撞 检测 示意 图 


圆 形 碰撞 检测 可 以 将 对 象 看 成 圆 形 然后 检测 碰撞 ， 圆 形 的 碰撞 检测 相 比 起 来 更 简单 ， 只 需要 通过 两 点 间距 离 公 式 计算 出 两 个 圆 形 的 距离 ， 只 要 圆心 距 小 于 两 个 圆 的 半径 和 ， 就 证 明 两 个 圆 碰撞 了 。 


13.2.2 ”碰撞 检测 在 Cocos2D-X 中 的 实现 


为 了 说 明 在 Cocos2D-X 中 实现 碰撞 检测 ， 这 里 实现 一 个 简单 的 动作 游戏 ， 包 括 地 图 检测 、 主 角 与 敌人 碰撞 检测 等 逻辑 ， 以 及 跳跃 的 碰撞 检测 ， 主 角 在 跳跃 和 移动 的 过 程 中 调用 与 地 图 碰撞 的 检测 ， 与 政 
人 碰撞 后 主角 会 闪烁 表示 受伤 。 这 里 的 主角 和 敌人 都 使 用 Cocos2D-X 引 警示 例 中 的 资源 ， 主 角 如 图 13-4 所 示 。 “敌人 ”如 图 13-5 所 示 。 


图 13-4 主角 


Mapscene 布 景 层 的 初始 化 函数 init 实 现 见 代 码 清单 13-18。 


代码 清单 13-18 init 函 数 的 实现 


bool MapScene::init() 


{ 


// 
地 图 背景 层 
Sprite *bg = Sprite::create ("background.png"); 
bg-»setScale (1.5£); 
addChild (bg, 0); 


// 

地 图 初始 化 
TMXTiledMap *map = TMXTiledMap::create ("ortho-objects.tmx"); 
addChild (map, 0, kTagTileMap); 
Size s = map-»getContentSize(); 
Size winSize = Director::getInstance()-»getVisibleSize(); 
map-»setPosition (Point (0,0)); 


// 

初始 化 主角 
gameplayer = Sprite::create ("grossini.png"); 
enemy = Sprite::create ("SpinningPeas.png"); 
тар->ааасћі 1а (gameplayer, map-»getChildrenCount ()); 
тар->ааасћі 1а (enemy, map-»getChildrenCount ()); 


A 

初始 化 敌人 
enemy->setPosition (Point (winSize.width/2 + 80,32)); 
enemy->setAnchorPoint (Point (0.5Ё,0)); 
gameplayer-»setPosition (Point (winSize.width/2,32)); 
gameplayer-»setAnchorPoint (Point (0.5#,0)); 
scheduleUpdate (); 
hmove = 0; 
vmove = 0; 
enemymovetick = 0; 


// 
主角 矩形 区 域 大 小 
ownsize = Size(40,100); 
// 
AIEE KIRK- 
othersize = Size (32,32); 
// 
是 否 是 受伤 状态 
isreduce = false; 


auto touchListener = EventListenerTouchOneByOne::create(); 


 touchListener-»setSwallowTouches (false); 
 touchListener-»onTouchBegan = 
CC CALLBACK 2(MapScene::touchBegan, this); 
 eventDispatcher-»addEventListenerWithFixedPriority 
( touchListener, -129); 
return true; 


在 这 里 初始 化 了 背景 层 、 地 图 层 、 敌 人 和 主角 。 并 把 它们 加 入 布景 层 当中 ， 不 仪 这 样 ， 还 要 将 一 些 变量 进行 初始 化 ， 包 括 主 角 的 和 矩形 宽 
系 决 定 主角 的 移动 方向 ， 运 行 效 果 如 图 13-6 所 示 。 


图 13-5 敌人 
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Г] 
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ownsize 和 othersize， 根 据 手指 点 击 位 置 和 主角 位 置 的 相对 关 


i dl 
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13-6 ”简单 的 动作 游戏 运行 效果 
触摸 函数 ccTouchesBegan 的 实现 见 代 码 清单 13-19。 


代码 清单 13-19 ccTouchesBegan 的 实现 


bool MapScene::touchBegan(Touch  *touch, Event  *event) 


{ 


Point m tBeginPos = touch-»getLocation(); 

Point playerpoint = gameplayer-»getFPosition(); 

Size palyersize = gameplayer-»getContentSize(); 

TMXTiledMap* map = (TMXTiledMap*) getChildByTag (kTagTileMap); 
Point mappoint = map-»getFPosition(); 


// 
根据 触摸 点 的 位 置 判 断 人 物 移动 方向 
if(m tBeginPos.x < playerpoint.x - palyersize.width / 2 
+ mappoint.x)í 
hmove = -1;// 


(Ий шп! 


左 移 


}else if(m tBeginPos.x > playerpoint.x + palyersize.width / 2 
+ тарроіпі.х) { 
hmove = 1;// 


右 移 
Jelse( 
hmove = 0; 
} 
if(m tBeginPos.y > playerpoint.y + palyersize.height 
+ mappoint.y)í 
vmove — 6;// 


ES 
}else{ 
vmove = 0; 
} 


return true; 


这 里 主要 实现 如 下 的 逻辑 : 如 果 触 摸 点 在 主角 左边 ， 主 角 向 左 方 移动 ， 触 摸 点 在 主角 右边 ， 主 角 向 右 方 移动 ; WÜARESSREUCERRRUERIDEELA, Ey, ЯДА АКТАУ e brach, ДИЕВ, A 
则 在 y 轴 方向 上 不 动 。 主 要 是 在 ccTouchesBegan 函 数 中 获得 触摸 点 ， 然 后 通 判 断 触 摸 坐标 与 主角 坐标 的 关系 ， 根 据 以 上 的 逻辑 判断 主角 的 移动 方式 。 


在 场景 的 每 帧 更 新 图 数 中 更 新 主角 的 位 置 并 进行 碰撞 检测 ，x 轴 和 y 轴 的 碰撞 检测 见 代码 清单 13-20。 
代码 清单 13-20 ”x 轴 和 y 轴 的 碰撞 检测 


void MapScene: :playermaphcollision()f{ 


// 
主角 与 地 图 水 平 〈 左 右 ) 图 素 的 碰撞 检测 
Point playerpoint = gameplayer-»getPosition(); 
Size palyersize = gameplayer-»getContentSize(); 
TMXTiledMap* map = (TMXTiledMap*) getChildByTag (kTagTileMap); 
int indexx,indexy; 
char mch[2560]; 
TMXLayer* layer = map-»getLayer ("logic"); 


А 

遍历 图 素 块 

for (int playery = playerpoint.y - palyersize.height;playery <= 
playerpoint.y;playery ++){ 


// 
人 物 左边 界 
indexx = (playerpoint.x - palyersize.width / 2) / 
map-»getTileSize().width; 
indexy = (playerpoint.y) / map-»getTileSize().height; 
Point playerindex - Point (indexx,indexy); 
int tilegid = layer-»getTileGIDAt (playerindex); 


if(tilegid > 0){ 
// 

如 果 碰 撞 ， 设 置 主角 位 置 
auto tiledic = map->getPropertiesForGID (tilegid); 


int mv = tiledic.asValueMap() ["collion"].asInt(); 
if(mv == 2){ 
hmove = 0; 
playerpoint.x = (indexx + 1) * map-»getTileSize().width-* 


palyersize.width / 2; 
gameplayer-»setPosition (playerpoint); 


return; 
} 
// 
人 物 右 边界 
indexx = (playerpoint.x + palyersize.width / 2 - 1) / 


map-»getTileSize().width; 
indexy = (playerpoint.y) / map-»getTileSize().height; 
playerindex = Point (indexx,indexy); 
tilegid = layer-»getTileGIDAt (playerindex); 
f(tilegid > 0){ 


如 果 碰 撞 ， 设 置 主角 位 置 
auto tiledic = map-»getPropertiesForGID(tilegid); 


int mv = tiledic.asValueMaep|() ["collion"].asInt(); 
if(mv == 2){ 
hmove = 0; 
playerpoint.x = (indexx) * map-»getTileSize().width - 


palyersize.width / 2; 
gameplayer-»setPosition (playerpoint); 


— 
~ 


return; 


} 
} 


void MapScene: :playermapvcollision()f{ 


// 
主角 与 地 图 竖 直 《〈 下 ) 图 素 的 碰撞 检 锅 
Point playerpoint = gameplayer-»getFPosition(); 
Size palyersize = gameplayer-»getContentSize(); 
TMXTiledMap* map = (TMXTiledMap*) getChildByTag (kTagTileMap); 
int indexx,indexy; 
TMXLayer* layer = map-»getLayer ("logic"); 


c 


// 

人 物 下 边界 
indexx = (playerpoint.x) / map->getTileSize() .width; 
indexy = map-»getMapSize().height - (playerpoint.y) / 


map-»getTileSize().height; 
Point playerindex - Point (indexx,indexy); 


int tilegid = layer-»getTileGIDAt (playerindex); 
if(tilegid > 0){ 
auto tiledic = map-»getPropertiesForGID(tilegid); 
int mv = tiledic.asValueMap() ["collion"].asInt(); 
if (mv == 1)( 
if (vmove < 0){ 
vmove = 0; 
hmove = 0; 
playerpoint.y = (map-»getMapSize().height - 
indexy) * map-»getTileSize().height; 
gameplayer-»setPosition (playerpoint); 
return; 
} 
} 
vmove —= 0.2; 


хн EB mts playermaphcollision, ZAŽI XE ЗЛА РАЛДУУ БЕА, MA РАЧА ТАА ААА, ПА Б АА, RUUEDOSISEUESESSSO, HSEEE 
没有 地 图 碰撞 的 位 置 。 


y 轴 上 的 碰撞 检测 函数 为 playermapvcollision ， 该 函数 只 需 检 测 主角 脚底 的 坐标 ， 如 果 碰 撞 则 将 y 轴 速度 置 为 0， 并 将 主角 放 到 没有 地 图 碰撞 的 位 置 。 


布景 层 更 新 函数 update 见 代码 清单 13-21。 


代码 清单 13-21 ”更 新 函数 update 的 实现 


void MapScene: :update (float dt) 
{ 


// 
主角 与 地 图 的 水 平和 数值 碰撞 检测 
playermaphcollision(); 
playermapvcollision(); 


/ / 
设置 主角 位 置 
Point playerpoint = gameplayer-»getPosition(); 
playerpoint.y += vmove; 
playerpoint.x += 1 * hmove; 
enemytick(); 
gameplayer-»setPosition (playerpoint); 


// 
如 果 主 角 不 是 受伤 状态 ， 检 测 是 否 与 敌人 碰撞 


if(! isreduce && iscollision (gameplayer, enemy) ) { 


// 
设置 为 受伤 状态 
ActionInterval* action = Blink::create(5, 10); 

gameplayer-»runAction (action); 

schedule (schedule selector (MapScene::resetreduce), 5.0f); 
isreduce = true; 

hmove = 0; 


} 


// 
地 图 随 主角 移动 逻辑 
TMXTiledMap* map = (TMXTiledMap*) getChildByTag (kTagTileMap); 
Size winSize Director::getInstance()-»getVisibleSize(); 
int mapWidth = map-»getMapSize().width * map-»getTileSize().width; 
int mapHeight = map-»getMapSize().height * 
map-»getTileSize().height; 


/ / 
获得 地 图 相对 主角 位 置 ， 并 设置 地 图 位 置 
float deltax = playerpoint.x - winSize.width/2; 
Float deltay = playerpoint.y - 32; 
if(-deltax > 0){ 
deltax = 0; 
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deltax = mapWidth - winSize.width; 
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> 0){ 
deltay = 0; 


if(-deltay < -mapHeight + winSize.height)í 
deltay = mapHeight - winSize.height; 


} 


map->setPosition (Point (- deltax,-deltay)); 


update 函 数 检 测 完 地 图 碰撞 后 更 新 主角 的 地 图 位 置 ， 之 后 调用 敌人 的 逻辑 函数 enemytick。enemytick 函 数 的 实现 见 代 码 清单 13-22。 


代码 清单 13-22 enemytick 函 数 的 实现 


void MapScene::enemytick()í 


/ 
敌人 自动 在 自己 的 区 域内 运行 逻辑 
Point enemypoint = enemy-»getPosition(); 
f(enemymovetick >= 0 && enemymovetick <= 20){ 
enemymovetick Б 
enemypoint.x += 2; 


H- 


}else if(enemymovetick > 20 && enemymovetick <= 60){ 
nemymovetick * 
enemypoint.x -= 2; 

}else if(enemymovetick > 60 && enemymovetick <= 80) { 
enemymovetick Б 
enemypoint.x += 2; 

Jelse if (еп 


X ; 
mymovetick > 80){ 
enemymovetick = 0; 


enemy->setPosition (enemypoint); 


该 水 数 即 更 新 政 人 位 置 函数 。 调 用 enemytick 函 数 以 后 ，update 函 数 调用 检测 碰撞 函数 ， 首 先 通 过 isreduce 变 量 判断 主角 是 否 受 伤 ， 如 果 已 经 受伤 则 处 于 “无 敌 ”的 不 检测 碰撞 受伤 状态 ;之 后 调用 
iscollision 检 测 主 角 与 敌人 是 否 碰撞 ， 这 里 依然 采用 矩形 碰撞 ， 但 是 主角 和 敌人 的 锚 点 都 为 中 心 ， 这 里 分 别 检 测 中 心 点 的 横 纵 坐 标 差 即 可 。 


iscollision 国 数 的 实现 见 代码 清单 13-23。 


代码 清单 13-23 iscollision 函 数 的 实现 


bool MapScene::iscollision(Sprite *mysprite, Sprite *testsprite) 


{ 
// 
Ж хе 


Point ownp = mysprite-»getPosition(); 
Point otherp = testsprite-»getPosition(); 
if(abs(ownp.x - otherp.x) <= ownsize.width/2 + othersize.width/2 && 
ownp.y - otherp.y <= othersize.height/2 && 
ownp.y - otherp.y >= -1 * ownsize.height/2)í 
return true; 


) 


return false; 


如 果 iscollision 返 回 true， 则 表明 主角 和 敌人 碰撞 ， 主 角 处 于 受伤 状态 ， 从 表现 上 调用 闪烁 动作 (Blink 动 作 ) ， 从 人 逻辑 上 将 开关 变量 置 为 true， 这 样 之 后 的 一 段 时 间 内 将 不 判断 是 否 受 伤 ， 也 就 是 受伤 
冷却 ， 这 里 调用 时 间 调 度 函 数 schedule。 在 受伤 动作 结束 后 ， 会 调用 函数 将 开关 变量 置 为 false， 回 到 正常 的 状态 。 最 后 在 update 函 数 中 更 新 主角 位 置 ， 注 意 主角 与 地 图 间 的 相对 坐标 关系 即 可 。 


在 这 个 例子 里 有 二 维 游戏 的 两 种 碰撞 检测 方式 : 一 种 是 地 图 的 碰撞 检测 ， 通 过 位 置 判 断 对 应 的 图 素 ， 从 图 素 中 获得 数据 来 判断 是 否 碰撞 ; 另 一 种 是 主角 与 敌人 的 碰撞 检测 ， 就 是 矩形 块 之 间 的 碰撞 ， 这 
种 碰撞 党 被 用 于 人 物 之 间 、 人 物 与 子弹 之 间 的 碰撞 。 


13.3 “本章 小 结 


本 章 介 绍 了 游戏 开发 中 常用 的 算法 ， 包 括 给 敌人 加 入 人 工 智 能 的 启发 式 搜索 算法 A 星 搜索 算法 和 碰撞 检测 算法 ， 并 分 别 给 出 了 这 些 算法 在 Cocos2D-X 引 警 中 的 实现 方法 ， 其 中 A 星 算法 被 封装 到 一 个 类 
中 ， 方 便 重用 。 学 习 本 章 内 容 ， 要 深入 理解 这 些 算法 的 原理 再 进一步 加 以 运用 。 


第 14 章 ”粒子 系统 


作为 游戏 开发 者 ， 不 得 不 承认 的 事实 是 再 优秀 的 游戏 玩法 也 要 用 绚丽 的 游戏 画面 来 吸引 玩家 有 眼球， 普通 动画 并 不 能 完全 满足 我 们 的 要 求 ， 或 者 说 如 果 用 普通 动画 实现 足够 绚丽 的 效果 需要 更 高 的 代价 
(更 占 内 存 或 者 效率 ) ， 尤 其 对 于 手机 游戏 来 说 ， 这 往往 是 致命 的 ， 如 何 才能 使 用 很 少 的 内 存 和 计算 效率 获得 绚丽 的 动画 效果 呢 ” 粒子 系统 是 个 不 错 的 选择 。 动 画 粒子 系统 会 发 射 大 量 细小 的 粒子 ， 并 且 非 
常 高 效 地 泻 染 这 些 粒子 ， 可 以 模拟 随机 的 、 棚 棚 如 生 的 烟雾 、 闪 电 、 雨 雪 、 雪 花 掉 藻 的 效果 。 


14.1 ”什么 是 粒子 系统 
粒子 系统 最 早出 现 于 20 世 纪 80 年 代 ， 最 早 主要 用 于 解决 由 大 量 的 按 一 定 规则 运动 (变化) 的 微小 物质 在 计算 机 上 的 生成 和 显示 问题 ， 是 计算 机 图 形 学 中 模拟 一 些 特定 的 模糊 现象 的 技术 ， 而 这 些 现象 用 
其 他 传统 的 演 染 技术 难以 实现 的 真实 感 。 


粒子 系统 通常 模拟 的 现象 有 火 、 爆 炸 、 烟 、 水 流 、 火 伦 、 落 叶 、 云 、 雾 、 雪 、 侍 、 流 星 尾 迹 或 者 发 光 轨 人 迹 等 抽象 视 沉 效果 。 通 过 很 多 属性 来 驱动 运行 ， 这 些 属 性 不 止 模拟 单个 粒子 的 运动 ， 更 是 影响 着 
整个 粒子 体系 的 运行 效果 ， 粒 子 系统 是 通过 所 有 粒子 共同 创造 的 整体 效果 。 


= 


需要 阅 明 的 是 ， 粒 子 系统 昌 然 在 处 理 大 量 单独 粒子 的 运动 上 很 有 用 处 ， 但 是 需要 考虑 粒子 间 相 互 作用 的 场合 时 ， 计 算 量 呈 粒子 数量 的 指数 级 增长 ， 大 家 就 会 有 些 力不从心 。 比 如 模拟 有 相互 引力 作用 下 
的 大 量 星体 的 运动 、 大 量 粒子 的 相互 碰撞 等 。 简 而 言 之 ， 无 论 多 么 易 用 的 技术 也 有 它 的 瓶 责 ， 我 们 需要 扬长 避 短 ， 发 挥 这 个 技术 的 优势 。 


Cocos2D-X 中 简单 的 粒子 系统 特效 如 图 14-1 所 示 。 


етеи 


114-1 Cocos2D- 义 中 的 物理 特效 


粒子 系统 可 以 使 游戏 更 加 真实 。 通 过 对 这 些 自然 现象 的 分 析 ， 现 实 中 的 这 些 效果 有 很 多 细小 微粒 的 变化 ， 赤 加 形成 了 这 些 效果 ， 因 此 这 些 效果 很 难 用 确定 的 对 象 来 描述 大 量 随机 混乱 的 粒子 效果 。 
1411 粒子 系统 的 特点 


可 以 通过 修改 属性 看 运行 效果 来 调试 粒子 系统 ， 也 可 以 通过 物理 和 数学 的 公式 推导 来 模拟 粒子 系统 的 运行 效果 ， 粒 子 系统 都 是 大 量 微粒 无 规则 运动 产生 的 独特 的 视觉 效果 ， 因 此 所 有 物理 引擎 都 涉及 如 
下 特点 。 


包含 大 量 物 理 微粒 对 象 〔( 粒 子 ) 。 
. 宏观 特性 : 每 一 个 粒子 都 符合 主要 的 物理 规律 。 
微观 特性 : 在 符合 规律 的 基础 上 ， 每 个 粒子 都 有 自己 的 随机 性 和 独特 性 。 
` 过 程 动态 特性 : 每 一 个 粒子 都 是 动态 的 ， 在 移动 中 不 断 变化 ， 在 每 个 模拟 中 都 是 不 断 更 新 自己 的 。 


这 样 按照 预先 的 设计 不 断 产生 新 的 粒子 ， 每 个 粒子 不 断 地 随机 变化 运动 ， 这 样 于 加 的 安 观 效果 就 是 粒子 系统 ， 可 以 棚 棚 如 生地 模拟 视觉 效果 。 
14.1.2 ”粒子 系统 的 构成 


一 个 完整 的 粒子 系统 要 包括 粒子 本 身 、 粒 子 发 射 器 和 粒子 的 整体 动态 效果 。 


每 一 个 粒子 就 是 一 个 图 形 对 象 ， 可 以 使 用 一 个 色 点 或 者 一 张 图 片 来 充当 粒子 。 每 个 粒子 都 有 自己 的 属性 ， 这 些 属性 不 仪 包括 描述 粒子 本 身 的 无 规则 运动 的 属性 ， 也 包括 粒子 在 宏观 整体 运动 中 的 属性 ， 
这 两 种 属性 共同 决定 了 粒子 的 运动 等 性 质 。 


粒子 发射 器 对 象 就 是 一 个 粒子 系统 的 整体 ， 如 同一 个 整体 的 控制 器 ， 一 片 云 、 一 团 雾 、 一 次 闪电 、 一 股 烟 都 是 由 一 个 独立 的 粒子 系统 来 模拟 的 ， 粒 子 和 发 射 器 对 象 描述 了 一 个 粒子 系统 的 复杂 性 的 全 部 
属性 ， 还 可 以 根据 自己 游戏 设计 内 容 ， 通 过 增加 新 的 属性 来 增加 整个 粒子 系统 的 复杂 性 ， 包 括 内 烁 、 随 机 波动 等 。 


粒子 的 整体 、 动 态 效果 首先 控制 了 粒子 的 生成 ， 每 个 粒子 在 生成 的 时 候 被 赋予 不 同 的 属性 ， 这 些 属 性 增加 了 系统 的 随机 性 ; 另外 动态 效果 还 控制 粒子 系统 的 整体 移动 和 变化 ， 包 括 整体 的 颜色 和 位 置 等 
变化 ， 比 如 整体 需要 有 波动 等 效果 。 由 于 粒子 是 由 一 个 原点 喷发 出 来 ， 所 以 原点 附近 集中 很 多 粒子 ， 粒 子 除了 方向 和 速度 以 外 ， 还 有 径 向 和 切 向 的 速度 。 


14.2 ”Cocos2D-X 中 的 粒子 系统 


在 Cocos2D-X 引 警 中 ， 和 粒子 系统 相关 的 类 包括 批 处 理 类 ParticleBatchNode、 粒 子 系统 类 ParticleSystem 以 及 粒子 系统 子 类 ParticleSystemQuad。 为 什么 ParticleSystem 会 需要 一 个 子 类 呢 ? 这 是 因 
为 ParticleSsystem 只 支持 经 过 批 处 理 的 粒子 系统 ， 也 就 是 只 支持 从 ParticleBatchNode 创 建 粒子 系统 ，ParticlesystemQuad 就 是 这 样 一 个 补充 ， 通 过 调用 poststep 函 数 实现 粒子 系统 的 OpenGLJ 栅 点 和 索引 


缓冲 的 创建 和 泻 染 ，postSstep 在 ParticleSystem 中 是 一 个 空 的 虚 函 数 ， 在 ParticleSystemQuad 被 继承 重 写 。 


本 节 将 首先 介绍 ParticleBatchNode 批 处 理 粒子 类 ， 然 后 介绍 ParticleSystem， 最 后 介绍 粒子 系统 子 类 ParticleSystemQuad， 并 介绍 它 与 基 类 的 区 别 。 


2.0 以 后 的 版 本 统一 为 放射 式 粒 子 系统 并 添加 了 不 同 种 类 的 子 类 ， 继 承 关系 如 图 14-2。 


BlendProtocol 


TextureProtocol 


Particlesystem 


ParticleSystemQuad 


图 14-2 ”粒子 系统 相关 类 的 继承 关系 


粒子 系统 类 包含 了 大 量 的 子 类 ， 这 些 子 类 其 实 可 以 理解 为 “已 经 调试 好 ”的 粒子 效果 内 置 在 引擎 中 直接 调用 ， 它 们 都 是 比较 常用 的 效果 ， 包 括 爆 炸 效果 ParticleExplosio、 火 球 效果 ParticleFire 等 ， 使 用 
它们 时 无 须 自 定义 数值 或 者 传 入 数值 ， 只 需 直 接 创建 并 加 入 父 节 点 中 。 


14.2.1 粒子 批 处 理 类 ParticleBatchNode 


类 通过 将 相同 贴图 的 图 批 处 理 的 方式 提高 泻 染 效 率 。 由 于 粒子 系统 具有 唯一 贴图 ， 并 大 量 绘制 在 屏幕 上 ， 这 两 个 特点 决定 了 它 是 批 处 理 思想 的 最 佳 实践 。 


在 第 3 章 中 介绍 了 SpriteBatchNode， 这 个 
它 的 绘制 原理 和 SpriteBatchNode 类 似 ， 使 用 它 创建 的 粒子 系统 ParticleSystem 类 对 象 有 如 下 限制 :所 有 绘制 时 使 用 相同 参数 以 及 混合 方式 等 ， 


ParticleBatchNode 继 承 自 Node 类 和 TextureProtocol| 类 ， 
并 且 只 人 允许 有 一 张贴 图 ， 如 果 不 想 使 用 它 ， 则 要 承受 相对 较 低 的 演 染 效率 ， 表 14-1 介 绍 了 ParticleBatchNode 类 相关 函数 。 


表 14-1 粒子 批 处 理 类 ParticleBatchNode 常 用 函数 


名 Ж ж ож 
通过 传人 网 片 和 容量 初始 化 ParticleBatehNode, 返回 是 否 成 
initWithFile 布尔 型 功 的 布尔 型 参数 ， 盟 数 内 部 首先 通过 贴图 路 径 创建 Texture2D 对 
象 ， 然后 调用 initWithTexture 县 正 初始 化 ParticleBatchNode 
initWithTexture 布尔 型 其 下 通过 传 入 2D 贴图 对 象 和 容量 初始 化 ParticleBatchNode 


AZAKA, 分别 是 单一 参数 、 加 入 2 轴 绘 制 顺序 以 及 加 A 
标签 和 z 轴 绘 制 顺序 ， 和 一 般 addChild 不 同 的 是 ， 传 入 节点 


ddChild €— à; 
тты HK s ПИ] Ж {Л ПМ, ParticleSystem, 3t m z 35] Н setBatchNode, 为 
ParticleSystem ix ЖАР у 
将 一 个 粒子 系统 作为 子 市 点 插入 批 次 管理 节点 的 相应 位 
insertChild Bo addChild 也 会 调用 insertChild， 只 是 addChild 会 默认 把 


ParticleSystem 对 象 加 到 最 后 
disableParticle 25 参数 是 索 3H. 根据 这 个 索引 值 设置 某 个 粒子 失效 不 显示 


setBlendFunc/getBlendFunc 


updateAllAtlasIndexes Ur dis T Ing 数据 
increaseAtlasCapacityTo CAEN 增加 粒子 顶点 数据 数组 容量 


(Ж) 
名 称 fi 述 
" e-— 取得 ParticleSystem 3-7 17 jo @ {ЕТЖ Zn > {ЇН ШЇЇ 
getCurrentIndex 


置 和 设置 后 的 位 置 
无 符号 整形 通过 z 轴 坐 标 值 取得 和 矩形 顶点 缓冲 信息 块 的 索引 
addChildHelper 无 侍 号 整形 将 一 个 粒子 系统 作为 子 节点 加 入 当前 例子 系统 批 处 理 类 


searchNewPositionInChildrenForZ 


ParticleBatchNode 类 似 SpriteBatchNode， 批 处 理 可 以 提高 泻 染 效率 ， 使 用 方法 见 代 码 清单 14-1。 


代码 清单 14-1 ”ParticleBatchNode 的 使 用 方法 


emitter = ParticleSystemQuad::create ("Particles/LavaFlow.plist"); 
 emitter-»retain(); 
auto batch = ParticleBatchNode::createWithTexture ( emitter-»getTexture ()); 

batch-»addChild( emitter); 

addChild(batch, 10); 


首先 创建 ParticleSystemQuad 或 者 Particlesystem ， 然 后 使 用 相同 的 贴图 创建 ParticleBatchNode， 把 之 前 的 ParticleSystem 作 为 子 节点 加 入 ParticleBatchNode 中 。 再 把 ParticleBatchNode 对 象 加 
入 场景 中 就 可 以 显示 出 来 。 


14.2.2 ”粒子 系统 基 类 ParticleSystem 


首先 来 看 粒子 系统 基 类 ParticleSystem， 设 置 粒 子 系统 相关 的 参数 包括 : 粒子 系统 的 发 射 率 、 重 力 模式 、 重 力 、 方 向 、 速 度 、 线 加 速度 、 角 加 速度 、 半 径 模式 、 开 始 半径 、 结 束 半径 和 角度 等 。 


粒子 系统 中 通常 用 到 的 基本 属性 包括 : 生命 周期 、 开 始 旋转 、 结 束 旋转 、 开 始 颜 色 、 结 束 颜 色 、 开 始 大 小 、 结 束 大 小 和 贴图 等 。 相 关 的 函数 如 表 14-2 所 示 。 需 要 说 明 的 是 ， 除 了 表 中 的 冰 
数 ，ParticleSystem 还 有 一 些 set/get 函 数 用 于 设置 粒子 的 相关 属性 ， 至 于 粒子 相关 属性 的 意义 ， 会 在 14.2.4 节 为 大 家 介绍 。 
表 14-2 ”粒子 系统 基 类 PatticleSystem 常 用 函数 
БЕР ЕН 描 xh 
isAutoRemoveOnFinish 


ii [н] 4d xd E Sp 


setAutoRemoveOnFinish 


设置 是 否 会 在 动画 播放 完 自 动 删除 


initWithFile 布尔 型 通过 plist 文件 初始 化 粒子 系统 
通过 键 值 对 集合 初始 化 粒子 系统 (initWithFile 困 数 也 需要 调 
initWithDictionary 布尔 型 “| 用 这 个 函数 ， 首 先 从 文件 中 读 和 字符 串 ， 然 后 再 将 字符 串 当 做 
参数 传人 ) 


initWithTotalParticles 布尔 型 通过 粒子 数量 初始 化 粒子 系统 


= 大 
БЕРУ АН 类 型 fih 述 
addParticle 布尔 型 [а] 2 DETAIL 
initParticle 2 初始 化 粒子 
stopSystem 2 结束 系统 


" s> ^ ч 22 /, = 
resetSystem ze 曾 系 统 


isFull 返回 当前 粒子 系统 是 否 已 经 将 所 有 粒子 发 身 
在 ParticleSystem, iX KAANE, ОК Е H ParticleSystem 
post5tep 


\ 24 Yde f ме эк H- м 2-M- Z IF 
Quad Zi *3 3x PRA, 17.2.3 节 会 详细 介绍 


setBlendAdditive 设置 混合 状态 是 否 为 亮 模式 


isBlendAdditive 布尔 型 返回 混合 状态 是 否 为 完 模 式 


14.2.3 ”粒子 系统 子 类 ParticleSystemQuad 
作为 粒子 系统 基 类 ParticleSystem 的 子 类 ，ParticleSystemQuad 不 仪 继承 了 基 类 的 函数 ， 还 有 一 些 自己 的 水 数 ， 这 对 之 前 的 粒子 系统 是 一 个 很 好 的 补充 ， 尤 其 是 通过 postStep 哨 数 可 以 在 不 需要 批 次 节 
点 时 也 能 够 实现 粒子 系统 的 OpenGL 顶 点 和 索引 缓冲 的 创建 和 泻 染 。 


首先 来 了 解 VAO (Vertex Array Object， 顶 点 数组 对 象 ) 和 VBO (Vertex Buffer Object， 顶 点 缓冲 对 象 ) 。VAO 是 OpenGL 3.0 以 后 才 引 入 的 ,但 是 在 2.0 版 本 中 作为 扩展 接口 。VBO 是 显卡 中 的 显 
存 ， 为 了 提高 泻 染 速 度 ， 可 以 将 要 绘制 的 顶点 数据 缓存 在 显存 中 ， 它 之 所 以 可 以 提高 绘制 效率 ， 是 因为 这 样 就 不 需要 将 要 绘制 的 顶点 数据 从 CPU 重 复发 送 到 GPU, 浪 费 带 宽 资 源 。 而 VAO 则 是 一 个 容器 ， 可 以 
包括 多 个 VBO， 由 于 它 进 一 步 将 VBO 容 于 其 中 ， 所 以 绘制 效率 将 在 VBO 的 基础 上 更 进一步 。 


ParticleSystemQuad 中 的 具体 函数 见 表 14-3。 


表 14-3  ParticleSystemQuad48 X f Ж 


init lexCoordsWithR ect 通过 贴图 的 矩形 块 来 初始 化 粒子 系统 


开 
setDisplayFrame au S Jl 
25 


setTextureWithR ect ix E M A XRJÉ Ba 


updateQuadWithParticle | 8$ | 更 新 粒子 、 设 置 颜 色 坐 标 等 属性 


每 次 update 时 都 会 调用 这 个 果 数 ， 针 对 不 使 用 批 次 节点 时 的 VBO 项 


postStep lS v hE E 
点 绥 冲 的 更 新 


ParticleSystemQuad 的 部 分 效果 图 如 下 。 


ParticleFlower 类 运行 效果 如 图 14-3 所 示 ; ParticleGalaxy 类 运行 效果 如 图 14-4 所 示 ; ParticleFireworks 类 运行 效果 如 图 14-5 所 示 。 


类 运行 效果 
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图 14-3  ParticleFlowet 
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图 14-5  ParticleFireworks 类 运行 效果 


更 多 效果 可 以 参见 tests 项 目 中 的 ParticleTest 部 分 。 


14.24 ParticleSystem 中 的 属性 介绍 


粒子 系统 之 所 以 有 绚丽 的 视觉 是 因为 它 的 速度 、 缩 放 都 是 随机 产生 的 ， 但 是 这 个 随机 又 不 是 完全 不 受 控 的 ， 它 分 一 个 初始 值 和 变量 值 ， 即 随机 数 的 范围 会 大 于 初始 值 ， 并 且 不 会 超过 初始 值 和 变化 值 的 
和 ， 这 两 个 值 在 命名 上 也 有 一 定 规则 ， 变 化 的 值 加 上 var 后 缀 。Particlesystem 中 的 属性 及 属性 的 介绍 见 表 14-4。 


表 14-4 粒子 系统 常见 属性 介绍 


名 FR Hi 述 
startSize 单个 粒子 起 始 大 小 
endSize 单个 粒子 结束 大 小 
startColor 开始 颜色 色 值 
endColor 结束 颜色 色 值 
startSpin 起 始 角 度 
endSpin 结束 角度 
emissionRate Az Vj] an xi E 
totalParticles 无 符号 整形 最 大 粒子 数 
texture 贴图 类 粒子 贴 医 | 
blendFunc 粒子 系统 与 背景 的 混合 方式 ， 关 于 混合 在 第 3 草 介绍 
opacityModifyRGB | 布尔 型 是 否 使 用 透明 度 来 影 啊 修改 颜色 住 
e FREE: 绑 定 在 世界 坐标 上 并 且 不 受 发 射 角 影响 
positionType 移动 方式 枚 举 类 型 |e RELATIVE: ЭЖЕ TES Ab ЕЈР HZ BI as MT 1) 38€ 5) E 5] 
e GROUPED: Ж ТЕ 2и E Bt di БЕЛ] as ce fof 2E fL 
| E e GRAVITY: 重力 型 粒子 系统 
emitterMode ЖИ] ai JJ 3 BUS e RADIUS: 放射 型 粒子 系统 
life 单个 粒子 生命 周期 ， 从 创建 到 消失 的 时 间 
duration 整个 粒子 效果 持续 的 时 间 ，-1 代表 一 下 持续 
isActive 粒子 系统 是 否 被 激活 
startRadius 起 始 圆 周 运动 半径 
endRadius 结束 圆周 运动 半径 
rotatePerSecond BERD jer ff ЛЕ 
gravity 重力 加 速度 
speed 运动 速度 
tangentialAccel 角速度 加 速度 
radialAccel 线 速度 加 速度 
isBlendAdditive 布尔 型 in AE: fi Joc BN 


143 ”在 Cocos2D-X 中 使 用 粒子 系统 


使 用 一 个 粒子 系统 通常 需要 如 下 4 个 步骤 。 


1) 建立 粒子 系统 。 
2) 产生 粒子 对 象 。 
3) 设置 参数 。 


4) 添加 到 父 节点 上 。 


在 Cocos2D-X 中 ， 使 用 粒子 系统 有 三 种 不 同 的 方法 。 


.新建 一 个 粒子 系统 PatticleSystemQuad 类 并 调整 它 的 参数 ; 


- 直接 使 用 ParticleSystemQuad 类 的 子 类 来 创建 相关 的 粒子 系统 ; 


` 使 用 粒子 编辑 器 来 创建 粒子 系统 。 


本 节 分 别 介绍 这 三 种 不 同 的 方法 。 


14.31 新建 一 个 粒子 系统 ParticleSystemQuad 类 
首先 介绍 通过 代码 新 建 ParticleSystemQuad 类 并 调整 它 的 参数 ， 具 体 新 建 方式 见 代 码 清单 14-2， 这 段 代码 出 自 Cocos2D-X 的 tests 项 目 中 的 ParticleTest 部 分 。 


代码 清单 14-2 新建 ParticleSystemQuad 类 并 调整 它 的 参数 


void DemoBigFlower::onEnter () 


{ 


Es 


ParticleDemo::onEnter(); 
// 
创建 例子 系统 对 象 


emitter = new ParticleSystemQuad(); 


// 
初始 化 粒子 系统 中 的 个 数 


 emitter-»initWithTotalParticles (50); 


// 
添加 到 场景 中 
m background-»addChild( emitter, 10); 


// 
设置 粒子 贴图 

 emitter-» 

setTexture (Director: :getInstance ()-»getTextureCache () 

-»addlmage(s starsl) ); 


// 
粒子 生命 周期 ，-1 
为 一 直 存 在 
 emitter-»setDuration(-1); 
// 
重力 
 emitter-»setGravity (CCPointZero); 
/ / 
粒子 角度 
emitter-»setAngle (90); / / 
基本 值 
emitter->setAngleVar (360); // 
变化 值 
// 
粒子 速度 


emitter-»setSpeed (160); 


emitter-»setSpeedVar (20); 


RadialAccel (-120); 
RadialAccelVar (0); 


emitter-»se 
emitter-»se 


emitter-»setTangentialAccel (30); 
emitter-»setTangentialAccelVar (0); 


emitter-»setPosition( CCPointMake (160,240) ); 
emitter-»setPosVar (CCPointZero); 


每 个 粒子 生命 周期 
1 
1 


emitter-»setLife (4); 
 emitter-»setlifeVar (1); 
/ / 
粒子 旋转 
_emitter->setStartSpin (0); 
_emitter->setStartSizeVar (0); 
_emitter->setEndSpin (0); 
emitter->setEndSpinVar (0); 


// 

粒子 颜色 初始 颜色 
Color4F startColor = (0.5f, 0.5f, 0.5f, 1.0f}; 
 emitter-»setStartColor (startColor) 


// 

初始 颜色 变化 值 
Color4F startColorVar = {0.5f, 0.5f, 0.5Ё, 1.0f}; 
 emitter-»setStartColorVar (startColorVar); 


/ 
结束 颜色 
Color4F endColor = {0.1f, 0.1f, 0.1f, 0.2f}; 
_emitter->setEndColor (endColor); 


// 
结束 颜色 变化 值 
Color4F endColorVar = {0.1#, O.1f, O.1f, 0.2f}; 
emitter-»setEndColorVar (endColorVar); 


/ / 

大 小 (以 像素 为 单位 ) 
emitter->setStartSize (80.0#); 
emitter->setStartSizeVar (40.0f); 
emitter->setEndSize (kParticleStartSizeEqualToEndSize); 


77 
粒子 出 现 速率 
emitter-» 


SsetEmissionRate( 
m emitter-»getTotalParticles ()/m emitter-»getlife()); 


/ / 
添加 颜色 混合 

 emitter-»setBlendAdditive (true); 

setEmitterPosition(); 


首先 新 建 粒子 系统 ， 然 后 设置 粒子 的 贴图 ， 之 后 设置 粒子 系统 的 相关 参数 、 包 括 : 粒子 系统 的 发 射 率 、 重 力 模式 、 重 力 、 方 向 、 速 度 、 线 加 速度 、 角 加 速度 、 半 径 模式 、 开 始 半径 、 结 束 半径 和 角度 
等 。 最 后 ， 设 置 粒 子 系统 位 置 函数 见 代码 清单 14-3。 


代码 清单 14-3 ”设置 粒子 系统 位 置 


void ParticleDemo::setEmitterPosition() 


{ 


auto s = Director::sharedDirector () -»getWinSize(); 
// 

如 果 粒 子 系统 指针 不 为 空 ， 则 重新 设置 位 置 
1 


f ( emitter != NULL) 
{ 
} 


 emitter-»setPosition(Point (s.width / 2, s.height / 2) ); 


运行 效果 如 图 14-6 所 示 。 
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14-6 ”新 建 一 个 粒子 系统 ParticleSystemQuad 类 并 调整 它 的 参数 方式 创建 粒子 系统 


14.3.2 ”直接 使 用 ParticleSystemQuad 类 的 子 类 
接 下 来 介绍 第 二 种 方式 : 通过 ParticleSystemQuad 的 子 类 来 新 建 粒 子 系统 ， 这 种 方式 比较 简单 ， 直 接 设 置 贴 图 便 可 使 用 ， 创 建 方式 见 代 码 清单 14-4。 


代码 清单 14-4 ”通过 ParticleSystemQuad 的 子 类 来 新 建 粒子 系统 


void DemoFlower::onEnter() 


ParticleDemo::onEnter(); 


// 
创建 粒子 系统 对 象 
emitter = ParticleFlower::create(); 
 emitter-»retain(); 
 background-»adaChild (m emitter, 10); 


// 
设置 粒子 的 贴图 
 emitter-»setTexture (Director::getInstance() 
-»getTextureCache()-»addimage (s starsl) ); 
// 
设置 位 置 
setEmitterPosition(); 


} 


可 以 将 这 些 ParticlesystemQuad 的 子 类 理解 为 已 经 调整 好 参数 的 粒子 系统 ， 类 似 粒子 编辑 器 编辑 出 来 的 。 
14.3.3 ”使 用 粒子 编辑 器 创建 粒子 系统 

接 下 来 介绍 使 用 粒子 编辑 器 生成 的 文件 新 建 粒子 系统 。 首 先 ， 使 用 的 plist 文 件 的 格式 见 代 码 清单 14-5。 
代码 清单 14-5 ”粒子 编辑 器 生成 的 plist 文 件 的 格式 


<?xml version-"1.0" encoding-"UTF-8"?» 
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
"http://www.apple.com/DTDs/PropertyList-1.0.dtd"» 
<plist version-"1.0"» 
«dict» 
Xkey»angle«/key» 
«real»0.0«/real 
«key»angleVariancec/key» 
«real»360«/real 
< 
< 


V 


V 


key»blendFuncDestinationc/key» 
integer»1«/integer» 


аы 
</plist> 


整个 文件 比较 长 ， 限 于 篇 幅 限 制 ， 这 里 只 给 出 部 分 。 可 以 看 出 ， 其 实 就 是 把 粒子 系统 相关 的 属性 经 过 编辑 器 的 调整 保存 在 plist 文 件 中 。 程 序 中 使 用 时 直接 获得 这 些 相关 的 属性 值 就 可 以 了 ， 这 样 避 免 了 
程序 中 的 大 量 设置 内 容 ， 也 方便 调整 ， 


plist 文 件 在 程序 中 的 使 用 见 代码 清单 14-6。 


代码 清单 14-6 ”plist 文件 在 程序 中 的 使 用 


void ParticleBatchHybrid::onEnter () 
{ 


ParticleDemo::onEnter(); 


// 
设置 背景 颜色 
setColor (Color3B::BLACK); 
removeChild( background, true); 
background = NULL; 
// 
读 入 plist 


文件 


emitter = ParticleSystemQuad::create ("Particles/LavaFlow.plist"); 
 emitter-»retain(); 


// 

获得 粒子 节点 列表 
auto *batch = ParticleBatchNode::create( emitter-»getTexture()); 
batch-»addChild( emitter); 


addChild(batch, 10); 
/ / 
时 间 调 度 


schedule (schedule selector( 
ParticleBatchHybrid::switchRender), 2.0#); 
auto *node - Node::create(); 

addChild (node); 

 pParentl = batch; 

 pParent2 - node; 


关于 粒子 编辑 器 的 使 用 与 选择 ， 在 下 一 节 进 行 详细 介绍 。 
14.3.4 “清理 ”粒子 系统 


使 用 粒子 系统 可 以 提升 游戏 的 效果 和 开发 效率 ， 但 是 粒子 系统 如 果 使 用 不 当 ， 也 会 出 现 内 存 泄露 的 危险 ， 从 而 导致 游戏 的 骨 溃 。 和 其 他 节点 一 样 ， 粒 子 系统 也 是 需要 “清理 ”的 ， 在 这 点 上 我 们 往往 会 
有 些 “ 错 觉 ”， 因 为 我 们 已 经 为 粒子 系统 设 定 了 播放 时 间 ， 播 放 时 间 到 达 后 ， 屏 幕 上 不 会 再 有 粒子 特效 了 。 但 事实 上 ， 相 关 的 内 人 存 并 没有 被 “清理 ”， 因 此 需要 使 用 粒子 系统 的 父 节点 的 removeChild 函 数 
删除 粒子 系统 对 象 ， 彻 底 释 放 内 存 。 


144 支持 Cocos2D-X 的 粒子 编辑 器 


借助 粒子 编辑 器 可 以 提高 开发 的 效率 ， 并 且 使 得 粒子 的 数值 调整 的 更 加 精确 ， 有 许多 支持 Cocos2D-X 的 粒子 编辑 器 ， 其 中 比较 有 名 的 是 Particle Designer， 但 是 Particle Designer 只 有 支持 Mac 系 统 运 
行 的 版 本 ， 而 且 也 是 收费 的 软件 ， 由 于 Cocos2D-X 的 跨 平 台 特性 ， 进 行 Cocos2D-X 开 发 的 编辑 器 等 开发 工具 同时 需要 支持 Windows 等 操作 系统 版 本 ， 因 此 本 节 还 将 介绍 一 款 支 持 Windows 操 作 系统 的 开源 
粒子 编辑 器 。 


144.1 Windows 粒 子 编辑 器 Cocos2d Particle Editor 


Cocos2D 的 Windows 粒 子 编辑 器 Cocos2d Particle Editor， 使 用 C# 语 言 开 发 ， 可 以 通过 https://github.com/fjz13/Cocos2d-x-ParticleEditor-for-Windows 网 址 下 载 使 用 程序 和 源 代码 ， 大 家 还 可 以 
支持 这 个 开源 的 项 目 。 在 网 址 上 下 载 解压 到 本 地 目录 ， 双 击 ParticleEditor.exe 文 件 便 可 运行 ， 运 行 效果 如 图 14-7 所 示 。 
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图 14-7 Cocos2d Particle Editot 界 面 


粒子 系统 的 整个 效果 和 发 射 器 与 粒子 的 属性 有 关 ， 因 此 粒子 编辑 器 的 重点 就 是 编辑 这 两 个 方面 的 数据 ， 并 使 开发 者 可 以 根据 效果 作 实 际 的 调整 ， 下 面 就 详细 介绍 Cocos2D 的 Windows 粒 子 编辑 器 的 属性 


编辑 部 分 。 
1) 半径 模式 属性 见 图 14-8。 


其 中 ，StartRadius 为 初始 半径 ，StartRadiusVar 为 初始 半径 浮动 值 ，EndRadius 为 结束 半径 ，EndRadiusVar 为 结束 半径 浮动 值 ，RotatePerSecond 为 粒子 围绕 初始 点 旋转 的 角 速 
度 ，RotatePerSecondPer 为 粒子 围绕 初始 点 旋转 的 角速度 浮动 值 。 


2) 粒子 大 小 属性 见 图 14-9。 


Endkadius 
EndhadiuzVar 


hotatelersecond 
RotateFerSecondVar 
olarthadius 
StartRadiusVar 


图 14-8 ”半径 模式 属性 
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9149 ”粒子 大 小 属性 
其 中 ，StartSize 为 粒子 的 初始 大 小 ，StartSizeVar 为 粒子 初始 大 小 的 浮动 值 ，EndSize 为 粒子 的 结束 大 小 。 若 为 -1， 表 示 结 束 大 小 与 初始 大 小 一 致 ，EndSizeVar 为 粒子 结束 大 小 的 浮动 值 。 
3) 角度 属性 见 图 14-10。 
其 中 Angle 为 粒子 的 发 射 角度 ，AngleVar 为 粒子 发 射 角度 的 浮动 值 。 


4) 粒子 生命 属性 见 图 14-11。 


14-10 ”角度 属性 
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图 14-11 粒子 生命 属性 
其 中 Life、LifeVar 分 别 为 粒子 的 生命 值 及 其 浮动 值 。 从 创建 粒子 开始 计时 ， 一 旦 超出 了 生命 期 ， 粒 子 也 就 消失 了 。 
5) 位 置 属性 见 图 14-12。 
PositionType 是 位 置 类 型 ， 有 3 种 取 值 。 
: Free (H H) 粒子 附属 于 游戏 世界 ， 并 且 不 受 发 射 器 的 位 移 影 响 。 
Relative (相对 ) 粒子 附属 于 游戏 世界 ,但 是 要 跟随 发 射 器 移动 。 
- Grouped ( 打 组 ) 粒子 附属 于 发 射 器 ， 并 且 跟 随 发 射 器 的 变化 而 变化 。 
SourcePositionX 和 SourcePositionY 为 发 射 器 的 原始 坐标 。PosVarX 和 PosVarY 为 发 射 器 坐标 的 浮动 值 。 


6) 编辑 器 属性 见 图 14-13。 
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图 14-12 位 置 属性 


图 14-13 ”编辑 器 属性 


lsBackgroundMove 为 设置 左 侧 预 览 画面 的 背景 是 否 移动 ，Scale 为 设置 左 侧 预览 画面 的 缩放 比 。 默 认 的 左 侧 预览 图 像 实际 上 是 2 倍 显示 的 ， 如 果 需 要 显示 的 图 像 是 原来 的 大 小 ， 需 要 把 这 里 设置 成 0.5， 
也 就 是 在 Cocos2D-X 引 警 使 用 时 的 正确 比例 ， 这 两 个 属性 只 影响 编辑 器 内 的 预览 效果 ， 不 对 保存 的 plist 文 件 产生 影响 。 


7) 纹理 泻 染 属性 如 图 14-14 所 示 。 


TexturePath 为 纹理 贴图 的 路 径 ，3 引 | 擎 会 根据 plist 文 件 的 路 径 以 及 此 属性 判断 要 加 载 的 文件 。 一 般 来 说 ， 这 里 要 填 相 对 路 径 。SrcBlendFunc、DestBlendFunc 为 纹理 渐变 融合 的 参数 。 对 于 一 般 情 况 ， 
只 需要 记 住 最 常 使 用 的 CC_BLEND_SRC 和 CC_BLEND_DST 分 别 对 应 GL ONE 和 GL ONE_MINUS_SRC_ALPHA。 


8) 颜色 属性 见 图 14-15。 
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91415 颜色 属性 
StartColor、EndColor、StartColorVar、EndColorVar 这 4 个 属性 代表 粒子 的 初始 颜色 、 结 束 颜色 以 及 其 浮动 值 。 
注意 ”在 Color4F 中 每 个 颜色 分 量 以 及 透明 度 都 是 用 0.0f~1.0f 表 示 ， 而 此 编辑 器 使 用 0~255 表 示 ， 所 以 有 时 可 能 会 产生 小 小 的 误差 。 
9) 重力 模式 见 图 14-16。 


Speed 为 粒子 (初始 ) 速度 ，SpeedVat 为 粒子 (初始) 速度 浮动 值 ，GravityX、GravityY 为 粒子 在 X 轴 和 Y 轴 上 的 加 速度 ，RadialAccel 粒 子 的 径 向 加 速度 ，RadialAccelVar 为 粒子 的 径 向 加 速度 浮动 
值 ，TangentialAccel| 为 粒子 的 切 向 加 速度 ，TangentialAccelVar 为 粒子 的 切 向 加 速度 浮动 值 。 


10) 友 射 器 属性 见 图 14-17。 
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1416 ”重力 模式 属性 
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图 14-17 发 射 器 属性 


: Mode 为 发 射 器 类 别 ， 现 有 的 发 射 器 分 为 两 种 ， 一 种 是 重力 (Gravity). 发 射 器 ， 另 一 种 是 放射 〈《 状 ) (Radius). 发 射 器 。 发 射 器 的 种 类 决定 了 它 的 工作 方式 。 不 同 种 类 的 发 射 器 根据 不 同 的 属性 来 决定 
由 它 发 射出 的 粒子 如 何 运 动 。 可 以 说 ，Mode 是 发 射 器 最 重要 的 基础 属性 之 一 。 


TotalParticles 决 定 了 最 多 同时 存活 的 粒子 数量 上 限 。 这 是 一 个 峰值 ， 主 要 目的 是 限制 内 存 等 资源 的 消耗 。 

: EmissionRate 为 粒子 的 发 射 速 率 ， 即 每 秒 发射 的 粒子 数量 。 

: Duration 表 示 发 射 器 执行 的 时 间 ， 单 位 是 秒 。 如 果 设 置 为 -1， 表 示 发 射 器 持续 发 射 粒子 。0 是 一 个 有 效 值 ， 但 是 设置 为 0 就 没有 意义 了 。 
.IsAutoRemoveOnFinish 为 发 射 完成 后 ， 是 否 删除 粒子 系统 ， 默 认 值 为 False。 

11) 自 旋 属 性 见 图 14-18。 

startSpin、Endspin、startSpinVar、EndspinVar 分 别 为 粒子 的 初始 自 旋 角 度 、 结 束 自 旋 角 度 以 及 其 浮动 值 。 设 置 了 这 些 值 ， 粒 子 就 开始 自转 了 。 


单 击 File 下 的 选项 便 可 保存 或 者 打开 以 前 的 plist 文 件 ， 如 图 14-19 所 示 。 
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图 14-18 ” 自 旋 属 性 
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图 14-20 ”Sample 选 项 


144.2 ”粒子 编辑 器 Particle Designer 


Particle Designer 是 为 Cocos2D 系 列 引 擎 和 iOS 系 统 的 OpenGL 程 序 设计 粒子 系统 开发 工具 ， 可 以 省 去 开发 时 间 。 通 过 网 址 http://particledesigner.71squared.com/ 下 载 试用 版 ， 本 书 成 书 之 时 最 新 的 
版 本 是 2.0。 (注意 ， 试 用 版 不 可 以 导出 文件 ， 购 买 后 可 以 导出 文件 。) 下 载 后 运行 效果 如 图 14-21 所 示 。 
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图 14-21 Particle Designeri& т Ж Ж 


整个 界面 分 为 三 部 分 ， 左 侧 展示 了 屏幕 上 现 有 粒子 效果 的 列表 ， 中 间 部 分 是 粒子 系统 运行 效果 ， 右 侧 是 现 有 的 粒子 效果 或 者 是 编辑 窗口 ， 这 两 种 模式 通过 右上 角 的 按钮 进行 切换 。 编 辑 窗口 如 图 14-22 
所 示 。 
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图 14-22 ”编辑 窗口 


这 一 和 版 本 的 编辑 器 不 仅仅 支持 IO 设备 的 分 辨 率 以 及 横 纵 屏 ， 还 包括 Android 设 备 的 分 辨 率 ， 适 配 跨 平台 的 屏幕 ， 如 图 14-23 所 示 。 
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图 14-23 分辨 率 可 供 选择 


新 版 的 编辑 器 更 加 紧凑 ， 属 性 编辑 界面 大 约 占 屏幕 的 1/4， 可 以 通过 选择 标签 来 决定 是 编辑 粒子 属性 还 是 发 射 器 属性 ,或 者 贴图 等 ， 标 签 如 图 14-24 所 示 。 


Iu зт V 


图 14-24 属性 标签 
属性 标签 上 第 一 个 是 发 射 器 属性 ， 第 二 个 是 粒子 属性 ， 第 三 个 是 颜色 属性 ， 第 四 个 是 贴图 属性 ， 这 样 其 实 就 是 把 之 前 的 编辑 器 的 四 列 属性 变 成 了 可 选择 变化 的 一 类 ， 使 得 界面 更 加 紧凑 。 


和 之 前 介绍 的 Windows 粒 子 系统 编辑 器 相 比 ， 这 个 属性 编辑 界面 提供 了 两 种 编辑 属性 的 方式 ， 一 种 是 拖 动 条 方法 ， 另 一 种 可 以 填写 数字 和 数字 上 下 调整 ， 这 使 得 开发 者 可 以 更 轻松 地 调整 粒子 相关 的 属 
性 。 下 面 分 别 介绍 粒子 编辑 器 的 相关 属性 。 


Т) 粒子 配置 属性 见 图 14-25。 
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图 14-25 “粒子 相关 属性 列表 
其 中 Lifespan 为 生命 周期 ， 周 期 越 长 屏幕 上 同时 存在 的 粒子 数量 就 越 多 ; LifespanVariance 为 生命 周期 的 波动 值 ， 例 如 生命 周期 为 9， 变量 为 1， 生 命 周期 就 是 5-1 和 5+1 之 间 随 机 的 数 。 


Start Size 为 开始 的 粒子 大 小 ，Start SizeVariance 为 开始 粒子 大 小 的 波动 值 ，Finish Size 为 结束 的 粒子 大 小 ，Finish SizeVariance 为 结束 粒子 大 小 的 波动 值 ，Rotation Start 为 旋转 开始 角 
，Rotation Start Variance 为 旋转 开始 角度 波动 值 ，Rotation End 为 旋转 结束 角度 ，Rotation End Variance 为 旋转 结束 角度 波动 值 。 


2) 发 射 器 属性 配置 见 图 14-26。 


Max imum Particles 为 粒子 的 数量 ，Emit Angle 为 粒子 发 射 的 角度 ，Emit Angle Variance 为 粒子 发 射 角度 变量 值 。 


3) 背景 颜色 设置 界面 见 图 14-27。 
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图 14-26 ”发射 器 属性 配置 
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图 14-27 ”背景 颜色 设置 
点 击 屏幕 下 方 的 “stage Color” 按 钮 ， 可 以 弹出 颜色 设置 的 窗口 ， 比 起 之 前 的 RGB， 现 在 的 颜色 设 定 用 一 个 滚动 条 来 实现 ， 更 加 直观 。 


4) 模式 设置 界面 见 图 14-28。 


914-28 模式 选择 
粒子 系统 有 重力 模式 和 半径 模式 两 种 模式 ， 其 中 半径 模式 为 粒子 沿 着 一 个 圆 形 旋转 ， 可 产生 流 涡 、 螺 旋 效 果 。 
其 中 可 以 单 击 选择 Gracity 重 力 模 式 和 Radial 半 径 模 式 。Duration 为 粒子 持续 时 间 ， 为 -1 时 是 持久 的 。 


5) 重力 模式 相关 属性 设置 见 图 14-29。 
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图 14-29 ”重力 模式 相关 属性 
重力 模式 的 相关 属性 包括 Speed 为 粒子 速度 ，Speed Variance 为 速度 波动 值 ，Gracity x 为 粒子 重力 下 x 轴 上 的 加 速度 ，Gravity y 为 粒子 重力 下 y 轴 上 加 速度 。 


Radial Acceleration 为 角 加 速度 ， 是 正 数 时 ， 离 发 射 器 越 远 ， 加 速 就 越 大 ， 否 则 相反 。Radial Acceleration Variance 为 角 加 速度 波动 值 。Tangential Acceleration 为 线 加 速度 ， 粒 子 旋转 围 着 发 射 器 
运动 ， 越 远 该 加 速 越 快 。 为 正 时 ， 逆 时 针 旋转 ; 否则 相反 。 


6) 半径 模式 的 相关 属性 设置 。 见 图 14-30。 
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图 14-30 ”半径 模式 的 相关 属性 


其 中 Max mum Radius 为 最 大 半径 ，Max mum Radius Variance 为 最 大 半径 浮动 值 ，Min imum Radius 为 最 小 半径 ，Degrees Per Second 为 影响 粒子 移动 的 方向 和 速度 的 值 ，Degrees Per Second 


Variance 为 影响 粒子 移动 的 方向 和 速度 的 浮动 值 。 


Т) 粒子 颜色 属性 见 图 14-31。 
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图 14-31 粒子 颜色 属性 设置 
分 别 为 颜色 值 的 初始 值 和 结束 值 ， 下 面 两 个 为 颜色 值 浮动 值 ， 均 为 RGB 值 和 透明 度 值 。 
8) 粒子 位 置 和 贴图 属性 见 图 14-32。 
可 以 通过 点 击 图 片 选择 贴图 的 位 置 来 替换 贴图 ， 拖 动 图 片 到 图 片区 域 也 可 以 蔡 换 贴图 ， 而 且 这 一 版 取消 了 图 片 大 小 的 限制 。 
9) 粒子 混合 模式 的 开始 值 和 目标 值 见 图 14-33。 
左 侧 的 一 栏 上方 可 以 点 击 设置 坐标 、 输 出 格式 等 ， 如 果 不 需要 展开 则 拖 动 边栏 拉 回 去 就 可 以 了 ， 展 开 图 如 图 14-34 所 示 。 


中 间 的 四 个 图 标 是 设置 模拟 器 的 显示 ， 可 以 设置 粒子 的 暂停 循环 播放 、 是 否 显示 粒子 等 ， 靠 右 的 四 个 是 输出 格式 、 是 否 吝 套 和 压缩 、 是 否 添 加 y 轴 的 镜像 。 
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图 14-32 ”粒子 位 置 和 贴图 属性 
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图 14-33 ”粒子 混合 模式 


图 14-34 输出 设置 展开 
点 击 下 方 的 Add System 和 Add Emitter 可 以 在 屏幕 中 添加 另 一 个 粒子 效果 ， 从 而 可 以 更 好 地 帮助 我 们 看 到 禾 加 粒子 效果 ， 下 一 节 会 看 到 这 样 的 好 处 。 


点 击 下 方 的 Export 可 以 输出 工程 ， 点 击 边 上 的 设置 按钮 可 以 设置 输出 格式 和 地 址 等 ， 如 图 14-35 所 示 。 


914-35 ”输出 设置 
当 使 用 Particle Designer 开 发 出 不 错 的 粒子 效果 时 ， 可 以 在 左 侧 边 栏 选择 相应 的 粒子 后 ， 右 键 选择 share， 就 可 以 将 你 设计 的 粒子 系统 分 享 给 其 他 的 开发 者 ， 如 图 14-36 所 示 。 


Particle Designer 提 供 很 多 成 型 的 粒子 效果 ， 虽 然 这 些 粒子 效果 不 能 完全 满足 你 的 开发 需要 ， 可 以 将 某 个 粒子 系统 作为 起 点 进行 粒子 效果 的 开发 。 


图 14-36 “分享 粒子 系统 
无 论 采用 怎样 的 粒子 系统 编辑 器 ， 都 是 采用 如 下 步骤 进行 粒子 特效 的 编辑 。 首 先是 找到 粒子 库 中 和 你 需要 的 效果 接近 的 粒子 特效 ， 然 后 编辑 相关 的 属性 达到 需要 的 效果 ， 最 后 保存 成 plist 文 件 。 


3 ”使 用 粒子 系统 时 ， 需 要 在 你 的 游戏 中 随时 注意 游戏 的 帧 率 ， 吉 免 游戏 内 容 加 入 粒子 效果 后 会 出 现 卡 顿 的 现象 ， 要 根据 真 机 的 测试 效果 来 判断 加 入 粒子 系统 之 后 的 效果 。 


在 目前 的 开发 中 ，Particle Designer 依 然 是 一 款 使 用 率 比较 高 的 引擎 ， 但 是 ，Particle Designer 有 一 个 很 不 方便 的 地 方 ， 就 是 它 不 能 跨 平台 工作 ， 特 效 师 需要 在 Mac 系 统 才 能 使 用 ， 跨 平台 粒子 编辑 的 
呼声 很 高 。V-Play 是 一 款 跨 平 台 游 戏 开 发 引擎 ， 由 于 这 套 引 警 的 开发 思路 部 分 借鉴 Cocos2D 系 列 引 擎 ， 因 此 它们 的 工具 链 也 支持 Cocos2D 系 列 引 擎 了 。 这 套 引 擎 提供 了 跨 平 台 粒 子 编辑 器 ， 它 不 仅 跨 Mac 和 
Windows 平 台 ， 甚 至 支持 iOS 设 备 和 Android 设 备 ， 这 让 特效 工程 师 可 以 直接 在 iOS 设 备 上 所 见 即 所 得 地 编辑 粒子 效果 ， 下 载 地 址 为 http://games.v-play.net/particleeditor/， 也 可 以 直接 在 苹果 或 者 谷歌 
商城 直接 搜索 下 载 这 款 粒 子 编辑 器 ， 运 行 效果 如 图 14-37 所 示 。 
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14-37 v-play 引 擎 粒子 编辑 器 运行 效果 


与 Particle Designer 相 比 ， 目 前 V-Play 还 不 是 很 完善 ， 也 不 像 Particle Designer 有 那么 庞大 的 粒子 效果 库 可 供 选 择 ， 只 是 在 官网 上 有 一 些 效果 的 代码 ， 不 过 开发 者 可 以 关注 这 款 编辑 器 今后 的 帮 展 。 


14.5 ER: 使 用 编辑 器 设计 下 十 效果 
在 二 维 的 手机 游戏 中 ， 需 要 用 到 粒子 系统 的 地 方 基本 分 为 两 类 : 特效 和 天 气 模拟 ， 而 其 中 天 气 效果 的 模拟 需要 和 游戏 很 好 地 配合 ， 调 试 的 细节 更 多 ， 而 造成 的 效果 也 是 更 好 ， 比 如 风靡 全 球 的 “部 落 冲 
突 ” 圣 诞 版 就 加 入 了 下 雪 的 粒子 效果 ， 配 合 场 景 中 建筑 物 上 的 积 雪 构建 了 很 好 的 圣诞 节 效 果 ， 本 节 就 介绍 如 何 使 用 Particle Designer 设 计 一 个 下 雨 的 效果 并 把 它 用 在 你 的 游戏 中 。 


下 雨 比 下 雪 更 难 模拟 ， 下 雪 只 要 让 雪花 组 组 从“ 天空 ” 杜 落 束 很 有 感觉 了 ， 但 是 下 雨 ， 如 果 只 有 “雨滴 ”就 很 难 判断 ， 雨 滴 如 果 像 水 滴 就 不 区 真如 果 太 细 又 像 风 ， 比 较 好 的 办 法 就 是 在 二 者 中 间 取 一 
个 合适 的 度 ， 然 后 配合 雨滴 滴 在 地 面 的 效果 就 可 以 了 ， 下 面 就 一 步 步 实 现 这 个 效果 。 


首先 在 提供 的 效果 库 里 面 选择 一 个 我 们 需要 的 效果 类 似 ， 在 此 基础 上 修改 会 简单 很 多 。 首 先 选择 一 个 下 落 的 效果 Waterfall， 如 图 14-38 所 示 。 


图 14-38 Waterfall 效果 


然后 把 贴图 换 成 我 们 需要 的 雨滴 ， 这 时 看 到 我 们 的 贴图 显得 小 了 一 点 ， 继 续 修 改 相 关 数 据 ， 修 改 起 始 大 小 和 x 坐标 的 变化 值 ， 使 其 覆盖 全 部 屏幕 ， 如 图 14-39 所 示 。 
最 后 微调 一 下 角度 和 速度 ， 达 到 更 加 逼真 的 下 雨 效 果 ， 如 图 14-40 所 示 。 


为 了 表现 雨滴 打 湿地 面 的 效果 ， 加 入 另外 一 个 效果 ， 选 择 一 个 已 有 的 类 似 效果 ,经 过 类 似 的 修改 如 图 14-41 所 示 。 


图 14-39 ”修改 后 的 雨滴 效果 


91440 ”改变 角度 和 速度 的 效果 


图 14-41 加 入 雨滴 滴 到 地 面 上 的 效果 


运行 在 Cocos2D-X 项 目 中 ， 见 项 目 示例 14-1， 效 果 如 图 14-42 所 示 。 


IE 


图 14-42 ”下 雨 效果 


粒子 系统 会 发 射 大 量 细小 的 粒子 ， 并 且 能 非常 高 效 地 泻 染 这 些 粒 子 ， 比 泻 染 单个 精灵 要 高 效 得 多 ， 此 外 可 以 模拟 烟雾 、 闪 电 、 雨 雪 、 雪 花 随机 掉 落 的 效果 。 粒 子 系统 可 以 使 游戏 更 加 真实 并 且 负 有 生命 
感 。Cocos2D-X 支 持 粒子 系统 可 以 帮助 开发 者 获得 更 好 的 效果 。 本 章 分 别 介绍 Cocos2D-X 中 粒子 系统 相关 的 类 ， 并 且 介 绍 了 支持 Cocos2D-X 粒 子 编辑 器 的 使 用 。 最 后 通过 一 个 实例 介绍 了 使 用 编辑 器 模拟 


下 雨 效 果 。 


第 15 章 介绍 Cocos2D-X 中 的 着 色 器 。 


第 15 章 ”Cocos2D-X 中 的 着 色 器 


由 于 Cocos2D-X 是 以 OpenGL 为 基础 的 跨 平台 引擎 ， 它 自然 继承 了 OpenGL 的 一 切 功能 ,包括 着 色 器 ， 可 以 帮助 我 们 实现 一 些 图 片 处 理 效果 ， 从 而 使 我 们 的 游戏 看 起 来 更 炉 。Cocos2D-X 中 使 用 
GLProgram 类 作为 着 色 器 效果 的 “管理 类 ”， 每 个 节点 都 可 以 通过 调用 setShaderProgram 遂 数 来 设置 自己 的 着 色 器 效果 ， 本 章 就 从 着 色 器 的 原理 讲 起 ， 告 诉 你 什么 是 着 色 器 ， 并 通过 着 色 器 在 游戏 中 的 应 
用 来 全 面 掌握 Cocos2D-X 引 擎 中 的 着 色 器 。 


15.1 什么 是 着 色 器 语言 


对 于 Cocos2D-X 的 基础 OpenGL 可 以 这 样 理解 ， 它 内 部 有 两 台 机 器 ， 一 台 负 责 顶 点 变换 、 光 照 、 纹 理 坐 标 变换 和 裁剪 等 顶点 变换 操作 ， 另 一 台 负 责 纹理 应 用 和 环境 ， 包 括 颜色 求 和 、 埃 应 用 和 抗 锯齿 等 
片段 操作 ， 调 用 相应 函数 并 传 入 相应 的 参数 来 进行 这 些 操 作 。 如 同 通 过 按钮 操作 机 器 ， 我 们 并 不 知道 也 不 能 控制 机 器 的 内 部 流程 ， 这 是 OpenGL ES 的 1.0 版 本 中 支持 的 固定 功能 。 从 OpenGL 2.0 开 始 引入 了 
基于 着 色 器 的 图 形 编程 机 制 ， 从 而 支持 OpenGL 着 色 语 言 (OpenGL Shading Language, GLSL) 。 我 们 可 以 通过 着 色 语言 用 自 定 义 的 程序 来 蔡 代 哪些 固定 功能 的 管线 。 需 要 注意 的 是 ， 由 于 应 用 程序 对 于 
速度 的 要 求 不 断 提 高 以 及 硬件 的 发 展 ，OpenGL 和 GLSL 依 然 处 于 不 断 的 发 展 与 完善 中 。 


GLSL 并 不 是 一 个 独立 完整 的 程序 或 者 项 目 工 程 ，GLSL 着 色 器 程序 本 身 可 以 理解 为 字符 串 ， 这 个 字符 串 从 程序 内 部 的 OpenGL 函 数 接口 进入 。 这 些 字符 串 集 会 传送 到 硬件 厂商 的 驱动 程序 ， 着 色 器 可 从 程 
序 内 部 定义 字符 串 或 读 入 纯 文 字 档 来 〈 读 入 字符 串 ) 即时 建立 ， 最 终 都 会 以 字符 串 形 式 传送 到 驱动 程序 。 


Cocos2D-X 3.0 基 于 OpenGL ES 2.0 版 本 ， 该 版 本 全 部 顶点 和 片段 处 理 都 需要 通过 着 色 器 来 完成 ， 而 且 OpenGL ES 是 OpenGL 的 一 个 精简 版 本 ， 所 以 需要 注意 的 是 ，Cocos2D-X 并 不 是 一 个 完整 功能 能 
GLSL， 但 是 几乎 可 以 满足 我 们 的 需求 。 


152 着 色 器 语言 概 哆 


着 色 器 语言 与 C 语 言 有 很 多 相似 点 ， 语 法 规则 基本 相同 ， 两 者 拥有 相同 的 整数 和 无 符号 整数 集 、 循 环 和 条 件 结构 、 运 算 符 以 及 预 处 理 功能 等 ， 但 是 也 有 些 不 同 ， 其 去 掉 了 一 些 C 语 言 的 某 些 功能 项 ， 并 加 
入 了 输入 变量 、 输 出 变量 ， 可 以 控制 着 色 器 之 间 的 数据 传递 ， 并 对 操作 符 和 函数 进行 了 适度 扩展 。 


15.21 着 色 器 语言 的 特点 
首先 来 看 一 个 着 色 器 的 例子 ， 见 代码 清单 15-1。 


代码 清单 15-1 着 色 器 例子 


#ifdef GL ES 
Precision mediump float; 
#endif 
Uniform sampler2D u texture; 

Varying vec2 v texCoord; 

Varying vec4 v fragmentColor; 

Void main (void) 

{ 

Float alpha = texture2D(u texture, v texCoord).a; 
Float grey = dot(texture2D(u texture, v texCoord).rgb, 
vec3(0.299, 0.587, 0.114)); 

gl FragColor - vec4(grey, grey, grey, alpha); 

} 


这 是 一 个 把 图 片 灰 化 的 一 段 着 色 器 语言 代码 ， 后 面 的 示例 程序 中 还 会 用 到 这 个 例子 。 可 以 看 到 ， 大 部 分 语言 的 特点 和 C 语 言 类 似 ， 不 同 之 处 就 是 ， 除 了 C 语 言 的 布尔 型 、 整 型 和 浮 点 类 型 之 外 ， 着 色 器 语 
言 还 有 一 些 “ 专 属 ” 的 类 型 。 着 色 器 语言 的 类 型 见 表 15-1。 


表 15-1 着 色 器 语言 的 类 型 


类 型 Ho Ж 
bvec2,bvec3,bvec4 BR 2, 3, 4 个 布尔 变量 成 分 (数量 以 后 级 名 为 准 ) [Н] 
ivec2,ivec3,ivec4 包含 2，3，4 个 整 型 变量 成 分 AERA A НАЈ 
vec2,vec3,vec4 包含 2，3，4 个 浮 点 型 变量 成 分 (数量 以 后 级 名 为 准 ) HI de 
mat n * m n*m on 和 mm 为 任意 整数 ) 浮 点 型 矩阵 
sampler1D, sampler2D, sampler3D 引用 1D, 2р, 3D 纹理 常量 


可 以 看 到 代码 清单 15-1 使 用 了 sampler2D、vec2 以 及 vec4 内 容 。 
另外 除了 5 语言 本 身 有 的 const 等 修饰 符 外 ， 着 色 器 中 还 有 些 “ 专 属 ” 的 修饰 符 ， 见 表 15-2。 


表 15-2 类 型 限定 符 


类 m й Ж 


仅 可 在 顶点 着 色 器 中 进行 访问 ， 并 且 是 只 读 变量 ， 可 以 访问 顶点 数据 ， 包 括 


attribute i 
float, vec 以 及 mat 数据 类 型 
" 在 图 元 中 保持 不 变 的 全 局 变量 ， 只 读 变 量 ， 可 以 用 于 任意 基本 数据 类 型 以 及 
uniform MEA 
2 义 和 数组 
varying П Ат аА Г Е Тер ген, АБЕ 


可 以 看 到 代码 清单 15-1 使 用 了 uniform 获 得 贴图 对 象 ， 并 且 使 用 了 varying 变 量 
除了 以 上 两 种 “陌生 的 ”符号 外 ， 还 有 一 个 dot 冰 数 ， 这 是 着 色 器 语言 包含 的 几何 函数 ， 具 体 几 何 函 数 见 表 15-3。 


表 15-3 ”几何 函数 


名 ^W жю ж 

length 回 量 长 度 计 算 

distance 两 点 间距 离 

dot 回 量 点 积 ， 如 回 量 (х, у) (а, D 的 点 积 就 是 x*aty*b 
CIOSS DESG 

normalize [5] 77 [3] KRASE [п] it 


可 以 看 到 代码 清单 15-1 使 用 dot 把 贴图 的 RGB 值 变 成 了 灰 度 值 ， 成 为 图 片 灰 化 的 关键 一 步 


和 C++ 语言 一 样 ， 着 色 器 语言 也 是 从 main 函 数 开 始 ， 当 然 也 可 以 自 定义 函数 ， 函 数 也 有 一 些 新 的 参数 类 型 ， 比 如 形式 参数 复制 并 不 返回 的 in (默认 形式 ) ， 函 数 结束 后 返回 的 out (不 需要 传 值 ) 以 及 
既是 输入 又 是 输出 的 inout。 


何方 神圣 ?由 于 着 色 器 语言 并 不 获得 任何 输入 (直接 读 取 图 片 或 文件 ) 也 不 做 终端 的 绘制 工作 ， 我 们 可 以 把 它 理解 为 是 


函数 的 最 后 一 句 ， 出 现 了 一 个 “从 来 没有 被 定义 ”的 “gl FragColor”， 这 又 
它 只 是 一 个 “中 介 ”， 于 是 就 有 了 负责 和 和“ 中介” 交流 的 内 置 变量 ， 表 15-4 是 输入 属性 ， 表 15-5 是 输出 属性 。 


一 个 流水 线 上 的 一 步 ， 这 样 的 一 步 需要 前 一 步 的 输入 以 及 进行 后 一 步 的 输出 ， 


表 15-4 输入 属性 


名 Ж ж ж 
о] Vertex 物体 空间 的 顶点 位 置 
gl Color 质点 颜色 
gl Normal 质点 法 线 
gl MutiTexCoordn 页 点 纹理 坐标 
о] FogCoord [Ut vx 25 ^I ps 
gl TextCoord 纹理 坐标 的 只 读 插 值 输入 数组 


表 15-5 输出 属性 


名 称 fi Y 
gl Vertex 物体 空间 的 项 点 位 置 
о] FragColor Bc. HL JG II ЕГЕ 
gl FragData[] 任意 数据 数组 输出 ， 不 能 与 FragColor 共用 
gl FragDepth 深度 输出 ， 如 果 没 有 被 写 入 ， 则 值 为 固定 功能 的 管线 
gl TexCoord[] 纹理 坐标 varying 数组 
gl FogFragCoord ZAVER varying 数组 
gl ClipVertex HP 38 98 F E AI ЖА ВУ AP di LEA 
(Ж) 
名 称 T 述 
gl FrontColor ЕЕ EREA l 
gl BackColor 1H Tft 3 PRU C P ii 


gl PointSize LARE S ERA Ута: HE T ОЛЕНИ а 


回 过 去 再 看 代码 清单 15-1 就 是 通过 输入 的 二 维 纹理 u_ texture， 首 先 获得 alpha 值 ， 然 后 通过 dot 得 到 灰 度 值 ， 最 后 把 灰 度 值 和 保持 不 变 的 alpha 值 赋 给 gl FragColor 进 行 图 片 的 灰 化 绘制 ， 本 章 后 面 会 把 
这 段 代码 放 入 具体 的 Cocos2D-X 项 目 中 进行 图 片 的 灰 化 处 理 。 


15.2.2 ”使 用 着 色 器 可 以 为 我 们 带 来 什么 


代码 清单 15-1 的 着 色 器 例子 是 将 图 片 灰 化 ， 什 么 时 候 我 们 会 用 到 图 片 灰 化 呢 ， 比 如 让 按钮 无 效 时 需要 将 按钮 置 灰 。 


这 其 


这 一 个 简单 的 片断 着 色 器 的 例子 ， 对 灰 化 的 结果 还 可 以 对 颜色 进行 调 色 ， 首 先 获得 这 个 颜色 的 灰 度 值 ， 然 后 把 灰色 值 乘 以 一 个 颜色 向 量 ， 这 个 颜色 向 量 加 强 某 些 颜 色 通 道 ， 并 减弱 其 他 颜色 通道 
的 强度 ， 


实 是 
灰 化 的 具体 方式 见 代码 清单 15-2。 


代码 清单 15-2 利用 着 色 器 调 棕 色 


#ifdef GL ES 

precision mediump float; 
fendif 
uniform sampler2D u texture; 

varying vec2 v texCoord; 

varying vec4 v fragmentColor; 

void main (void) 

{ 

float alpha = texture2D(u texture, v texCoord).a 

Float grey = dot(texture2D(u texture, v texCoord).rgb, 
ec3(0.299, 0.587, 0.114)); 

| FragColor = vec4 (grey * vec3(1.2,1.0,0.8), alpha); 


代码 清单 15-3 实 现 了 一 个 照片 曝光 的 反 色 效果 ， 算 法 很 简单 ， 获 得 图 片 的 RGB 值 (0.0~ 1.0， 如 果 以 255 为 基准 的 色 值 需要 除 以 255) ， 然 后 用 1 减 去 这 个 色 值 ， 就 可 以 获得 相应 的 反 色 效 果 。 


代码 清单 15-3 ”着 色 器 实现 的 反 色 效果 


void main (void) 

{ 

 Fragcolor.fgb = 1.0 
= gl 4 Color. rgb; 
_FragColor.a = 1.0; 


Q 1 


à 


) 


介绍 完 片断 着 色 器 的 示例 ， 表 来 看 一 个 顶点 着 色 器 的 示例 ， 见 代码 清单 15-4。 


代码 清单 15-4 简单 的 顶点 着 色 器 


void main (void) 


gl Position - gl ModelViewProjectionMatrix * gl Vertex; 
91 FrontColor = gl Color; 


) 


第 一 句 将 模型 视图 和 投影 矩阵 结合 在 一 起 ， 称 为 MVP 和 矩阵 ， 把 位 置 转换 到 裁剪 空间 ; 第 二 名 将 顶点 的 颜色 从 输入 复制 到 输出 。 


顶点 着 色 器 也 用 于 增加 光照 效果 ， 实 现 的 方法 见 代码 清单 15-5。 


代码 清单 15-5 ”着色 器 实现 散射 光照 效果 


void main (void) 


{ 


gl Position = gl ModelViewProjectionMatrix * gl Vertex; 
vec3 N = normalize(gl NormalMatrix * gl Normal); 
vec4 V = gl ModelViewMatrix * gl Vertex; 
vec3 L = normalize (lightPos[0] 
= M. хул) 
oat NdotL = dot 


(N,L 
) 


91 FrontColor = gl Color * vec4 (тах (0.0, Ndotl)) 
} 


这 段 代码 使 用 了 比较 复杂 的 算法 ， 其 中 N 是 顶点 的 单位 法 线 ，L 表 示 从 顶点 到 光源 的 单位 向 量 方向 ， 通 过 计算 N*L 的 乘积 与 0 的 比较 的 较 大 值 ， 乘 以 贴图 的 颜色 ， 获 得 了 光照 处 理 后 的 颜色 ， 得 到 | 散射 光照 
效果 (这 实际 上 是 一 个 散射 光照 的 方程 式 ) 。 


15.23 如何 学 习 着 色 器 语言 


如 果 要 更 深入 的 学 习 着 色 器 语言 ， 那 么 可 能 需要 一 本 书 的 篇 幅 来 学 习 ， 而 且 ， 从 15.2.2 节 的 例子 可 以 发 现 ， 着 色 器 相关 联 的 是 一 些 图 形 学 的 算法 ， 所 以 需要 在 使 用 时 根据 我 们 的 需要 搜索 相关 的 算法 。 
推荐 一 个 非常 好 的 工具 ， 是 一 个 所 见 即 所 得 的 shader 编 辑 器 shaderific， 可 以 从 官方 网 站 上 获得 这 个 应 用 的 相关 信息 ， 它 的 应 用 图 标 见 图 15-1。 


图 15-1 左边 是 免费 版 本 ， 右 边 是 付费 版 本 


shaderific 可 以 运行 在 iOS 操 作 系统 上 ， 有 两 个 版 本 ,免费 版 本 和 收费 版 本 ， 区 别 只 是 收费 版 本 可 以 在 使 用 后 保留 所 有 设置 ， 包 括 保存 文件 。 由 于 它 是 运行 在 iOS 设 备 上 的 ， 所 以 完全 是 基于 OpenGL ES 
版 本 ， 这 和 Cocos2D-X 的 原理 是 一 样 的 ， 也 就 是 说 ， 完 全 可 以 把 shaderific 编 辑 的 shader 程 序 在 Cocos2D-X 中 使 用 ， 完 全 不 用 担心 兼容 性 的 问题 。 图 15-2 和 图 15-3 分 别 是 编辑 文件 界面 和 显示 效果 界面 。 


01 - DepthShader 


= 


Depthshader. wsh DepthsShader.fsh 


created with Shaderific created with Shaderific 


attribute vec4 position; varying lowp vecá colorVarying; 


void main(í) 


{ 


form mat4 modelViewProjectionMatrix; 


ол -- ч ә МИН ‚МИШ. "АШ Р. м 


iform vecá materialDiffuseColor0; 


varying lowp vec4 colorVarying; 


void maint} 


float z = (position.z + 0.5) * 1.2; 


colorvarying = 
vecd(materialDiffuseColorÜ.x * =, 
materialDiffuseColorÜ,y * 


materialDiffusecolorÜ.z 2, 1.0); 


gl Position = modelViewProjectionMatri 


position; 


图 15-2 Shaderificfig shader X 4F 25 $F 28 


915-3 ”运行 shadet 效 果 界 面 


可 以 参考 《OpenGL 编 程 指南 ( 原 书 第 7 版 ) ) 由 ， 来 进一步 深入 学 习 OpenGL 的 相关 知识 和 shader 语 言 的 特性 ， 本 章 侧重 在 shader 基 础 以 及 Cocos2D-X 引 擎 中 的 使 用 。 


[1] 机 械 工业 出 版 社 ， 书 号 978-7-111-29450-4。 


15.3 ”在 Cocos2D-X 中 使 用 shader 


ASKS 


入 一 个 GLProgram 对 象 来 设置 shader。GLProgram 相 当 于 一 个 封装 着 shader 程 序 的 对 象 ， 本 节 首 先 来 看 shader 程 序 的 编译 执行 流程 ， 认 识 GLProgram 类 和 ShaderCache 类 ， 然 后 进一步 介绍 GLProgram 
类 的 使 用 方法 。 
15.3.1 shader 程 序 的 编译 执行 流程 

按照 规则 写 好 了 顶点 着 色 器 和 片断 着 色 器 ， 如 何 执行 它们 ， 需 要 调用 哪些 OpenGL 接 口 呢 ， 主 要 分 为 两 步 ， 创 建 着 色 器 容器 和 链接 成 完整 程序 ， 首 先 来 看 创建 着 色 器 容器 的 步 又。 

1) 调用 glCreateShader 创 建 shader 容 器 ， 参 数 是 shader 的 类 型 (GL VERTEX_SHADER 代 表 创 建 项 点 着 色 器 ，GL_FRAGMENT_SHADER 代 表 创 建 片 断 着 色 器 ) 。 

2) 调用 glShaderSource 以 字符 串 的 形式 为 shader 输 入 代码 。 

3) 调用 glCompileShader 编 译 着 色 器 代码 。 

创建 的 着 色 器 容器 虽然 万 事 俱 备 ， 但 是 仍然 不 能 让 我 们 看 到 效果 ， 需 要 一 个 “平台 ”， 下 面 的 过 程 是 链接 并 执行 shader 的 步骤 。 

1) 调用 glCreateProgram 创 建 程序 句柄 。 


2) 调用 glAttachShader 将 已 经 封装 好 的 shader 容 器 。 


3) 调用 glLinkProgram 链 接 程序 。 
4) 调用 glUseProgram 加 载 并 使 用 定义 和 链接 完成 的 程序 ， 此 时 shader 效 果 起 作用 了 。 


其 实 并 不 需要 手动 进行 这 些 操作 ， 因 为 它们 早已 经 被 封装 进 shader 执 行者 GLProgram 中 了 ， 但 是 依然 有 必要 知道 引擎 为 你 做 了 什么 。 
15.3.2 ”shader 执 行者 GLProgram 类 


GLProgram 是 Cocos2D-X 中 shader 程 序 的 具体 执行 者 ， 虽 然 表 面 上 调用 节点 类 的 setShaderProgram 是 我 们 需要 做 的 “执行 ”shader 的 工作 ， 其 实 它 只 是 把 这 个 节点 需要 的 shader 信 息 封 装 在 
GLProgram 类 里 存放 在 这 个 节点 里 ， 在 需要 执行 的 时 候 ，GLProgram 再 执行 相应 的 shader 程 序 。 


GLProgram 继 承 自 Object， 也 就 是 说 它 的 内 存 管 理 方式 就 是 Cocos2D-X 的 管理 方式 。GLProgram 的 相关 函数 见 表 15-6。 


表 15-6  GLProgram48 X #6 


名 Фф 描 x 

ZO ELTE На ҢА АМИН, Жш E Code МИША Br (d TCR ET] 
EB fe eR C] d GLProgram 

Tí DES Pus МИЗ (wsh) 和 片断 着 色 右 代码 (fh) 的 文件 名 以 参数 形式 传 
人 力 数 初始 化 GLProgram 

回 看 色 表 传人 参数 分 为 颜色 参数 (a color), EEM (a position) 和 贴图 


initWithVertexShaderByteArray 


1mtWithVertexShaderFilename 


addAttribute 参数 (a —M 
link 调用 glLinkProgram 链接 程序 
logForOpenGLObject 返回 OpenGL 信息 字符 串 
getVertexShaderLog 3k 18 D Н Y ^F. РУТА Н legForOpenGLObject 
getFragmentShaderLog їй Hh Br tussi BT. PISIS lo gForOpenGLObject 
getProgramLog 返回 gICreateProgram 产生 的 OpenGL 程序 句柄 信息 
compileShader 调用 glCompileShader 编译 shader 程序 

调用 glGetUniformLocation 获得 一 致 变量 的 存储 位 置 创建 并 更 新 着 色 需 中 
全 局 变量 的 值 ， 并 且 会 在 内 部 调用 use 困 数 ， 因 此 调用 了 它 就 不 必要 调用 


use。 一 般 在 link 调用 后 调用 ， 因 为 一 致 变量 的 存储 位 置 的 存储 位 置 需 要 在 

link 后 才能 获得 

getUniformLocationForName 通过 调用 glGetUniformLocation 根据 传人 的 名 称 获 得 一 致 变量 的 人 存储 位 置 
返回 该 一 致 变量 的 存储 位 置 是 否 需 要 更 新 ， 如 有 打 需 要 更 新 或 者 值 更 新 则 存储 

到 hashForUniforms 哈 希 表 中 ， 下 次 同样 的 更 新 则 不 需要 再 次 更 新 耳 ， 秘 有 遇 数 
首先 调用 updateUniformLocation 检查 一 致 变量 的 存储 位 置 是 否 需 要 更 新 ， 

如 条 需要 更 新 则 调用 glUniform(n)i 设置 ， 后 缀 名 1 代表 整数 ，f 代表 浮 点 数 : 

(n) 是 1 ~ 4 变量 


updateUniformLocation 


setUniformLocation With {п }1 


setUniformLocationWith [nif 


setUniformLocation With {п ту " ЯЕ г | 
и 功能 同上 ， 就 是 传人 的 是 数组 ，{n} 是 1 ~ 4 变量 


setUniformLocationWith [n] fv 


setUniformsForBuiltins 更 新 内 建 的 一 致 变量 ， 流 程 同 以 
setUniformLocationWithMatrix (nj fv ШЕЕ] Г, ЕЕ, ín) 是 4 变量 


Ин, nt 188 —595һааег ит оІАасһЅһаадегр 2—2, 2 51 ирадаќе0піғогтѕрА НЫ f useeRZk, [ВА АЈА R Bere mH) F, ВТЕР У 
必须 了 解 每 个 国 数 为 我 们 做 了 什么 ， 并 且 对 应 完成 这 个 动作 的 顺序 ， 这 样 才 不 会 重复 调用 一 个 功能 (比如 updateUniforms 后 面 调用 use) ， 或 者 忘记 某 个 功能 的 调用 。 


15.3.3 shader 管 理 者 ShaderCache 类 


Cocos2D-X 中 大 量 使 用 了 管理 者 模式 ， 这 种 模式 就 是 将 资源 类 的 对 象 放 入 一 个 单 例 中 ， 通 过 键 值 对 的 方式 存储 。 在 使 用 的 时 候 直 接 通过 名 字 获 得 相应 对 象 ， 这样 做 的 好 处 就 是 可 以 统一 完整 加 载 的 操 
作 ， 并 把 信息 或 者 资源 存储 到 程序 里 。shader 也 有 这 样 的 一 个 管理 类 shaderCache 作 为 存放 GLProgram 对 象 的 容器 。 


管理 者 是 个 单 例 ， 所 以 不 必 调 用 其 构造 函数 ， 直 接 调用 sharedShaderCache 就 可 以 获得 它 的 单 例 对 象 ， 具体 的 功能 函数 见 表 15-7。 


表 15-7 $ҺайегСасһе5& X 2 X Z1 22 


名 ЖҰ 撕 ж 

通过 传人 的 对 象 的 类 型 (shader 名 称 ) 和 GLProgram 指针 初始 化 相关 GLProgram (调用 相 
X initWithVertexShaderByteArray 和 addAttribute 等 )， 这 是 个 私有 肯 数 
loadDefaultShaders 加 载 默认 的 几 个 GLProgram 对 象 〈 创 建 并 初始 化 它们 ， 并 且 把 他 们 存储 到 键 值 对 映射 表 中 ) 
加 载 默 认 的 几 个 GLProgram 对 象 ， 和 loadDefaultShaders 不 同 之 处 就 是 不 创建 对 象 ， 
而 是 获得 原 对 象 重 新 设 定 值 
getProgram === 1 于 查找 键 但 对 表 ， 获 得 GLProgram XJ 
addProgram 回 键 值 对 表 中 加 入 新 的 GLProgram XJ 


loadDefaultShader 


reloadDefaultShaders 


shaderCache 管 理 着 一 个 以 名 称 和 GLProgram 对 象 对 应 的 键 值 对 表 ， 通 过 这 个 表 预 加 载 并 存储 一 些 shader 程 序 ， 在 需要 时 获得 并 使 用 。 对 于 在 程序 中 需要 重复 使 用 的 shader 程 序 ， 可 以 通 
shaderCache 进 行 管理 和 加 载 。 


15.34 在 Cocos2D-X 中 创建 并 使 用 shader 
介绍 了 Cocos2D-X 中 实现 shader 的 两 个 重要 角色 后 ， 来 看 一 下 具体 如 何 使 用 这 两 个 类 运行 shader 程 序 的 效果 ， 首 先 来 看 定义 GLProgram 的 方法 ， 具 体 的 步骤 见 代 码 清单 15-6。 


代码 清单 15-6 定义 GLProgram 


auto shader = new GLProgram(); 

shader-»initWithVertexShaderFilename ("Shaders/example.vsh", "Shaders/example.fsh"); 
shader-»addAttribute ("aVertex",GLProgram::VERTEX ATTRIB POSITION); 

shader-»link(); B i 

shader-»updateUniforms(); 

this-»setShaderProgram (shader); 

shader-»release(); 


首先 创建 并 初始 化 GLProgram 对 象 ， 然 后 通过 调用 initWithVertexShaderFilename 函 数 初始 化 GLProgram 对 象 ， 调 用 addAttribute 传 入 坐标 参数 ， 调 用 link 函 数 链接 程序 ， 调 用 updateUniforms 更 
新 一 致 变量 并 且 调 用 使 用 函数 ， 最 后 把 它 设置 到 要 显示 的 节点 中 。 其 中 初始 化 GLProgram 对 象 函数 可 以 调用 initWithVertexShaderByteArray 直 接 传 入 shader 代 码 。 


可 以 通过 shaderCache 缓 存 定义 的 GLProgram 对 象 ， 缓 存 的 方法 见 代码 清单 15-7。 


代码 清单 15-7 ”向 shader 缓 存 中 添加 shader 程 序 


ShaderCache::getlInstance()-»addProgram (shader , "cocos2d") 


这 句 话 分 为 两 步 ， 首 先 getlnstance 返 回 ShaderCache 单 例 对 象 ， 然 后 用 获得 的 单 例 对 象 调用 函数 传 入 GLProgram 对 象 和 名 称 。 这 两 步 可 以 用 一 行 代码 实现 ， 见 代码 清单 15-8。 


代码 清单 15-8 ”根据 名 称 获得 GLProgram 对 象 


ShaderCache::getInstance()-» 
getProgram(GLProgram::SHADER NAME POSITION TEXTURE COLOR) 


获得 的 ShaderCache 对 象 可 以 直接 被 setShaderProgram 设 置 给 节点 显示 出 来 。 


154 实战 : 图 片 灰 化 
代码 清单 15-9 出 自 程序 实例 15-1， 是 将 图 片 灰 化 的 效果 实现 。 


代码 清单 15-9 图 片 灰 化 的 效果 实现 


auto playSp = Sprite::create("general right.png"); 
playSp-»setPosition (Point (visibleSize.width/2 + origin.x, 
visibleSize.height/2 + origin.y)); 

this-»addChild (playSp); 

GLchar * pszFragSource = 

"#ifdef GL ES \п N 

precision mediump float; Mn \ 

#endif Nn N 

uniform sampler2D u texture; Mi \ 

varying vec2 v texCoord; Mi ^ 

varying vec4 v fragmentColor; Mi \ 

void main(void) Mn \ 

(NA N 

// Convert to greyscale using NTSC weightings Mn \ 

float grey - dot (texture2D (u texture, v texCoord) .rgb, 

vec3(0.299, 0.587, 0.114)); \п \ 

gl FragColor = vec4(grey, grey, grey, 1.0); \п\ 

Ns 

GLProgram* greyShader - new GLProgram(); 

greyShader-»initWithVertexShaderByteArray ( 
ccPositionTextureColor vert, pszFragSource); 

greyShader-»addAttribute|( 

GLProgram::ATTRIBUTE NAME POSITION, 

GLProgram::VERTEX ATTR B POS TION); 

greyShader-»addAttr e( 

GLProgram::ATTR 

GLProgram::VERT 

greyShader-»addAttr 

GLProgram::ATTR 

GLProgram::VERTE 

greyShader-»link(); 

greyShader-»updateUniforms (); 

playSp-»setShaderProgram(greyShader); 

greyShader-»relesase (); 


but 

BUTE NAME COLOR, 

X ATTRIB СО: OR) ; 
e( 


but 
BUTE NAME TEX COORD, 
X ATTRIB TEX COORDS); 


首先 创建 一 个 精灵 ， 然 后 通过 字符 串 创建 一 个 GLProgram 对 象 ， 最 后 通过 setshaderProgram 的 调用 给 精灵 图 片 赋予 的 shader 效 果 。 需 要 注意 ， 不 要 认为 代码 通过 编译 ， 你 的 shader 就 没有 问题 ， 因 为 
shader 不 是 在 C++ 代码 编译 并 且 项 目 打包 时 被 编译 ， 它 是 在 运行 到 这 部 分 时 才 被 编译 ， 甚 至 可 以 把 它 理解 为 一 个 “类 脚本 ”， 所 以 你 的 shader 程 序 报错 ， 一 般 是 在 运行 时 ， 比 如 我 们 把 


gl FragColor = vec4 (grey, grey, grey, 1.0); Mi \ 


改 成 


gl FragColor = ve4(grey, grey, grey, 1.0); \п \ 


运行 时 报错 如 图 15-4 所 示 。 


cocos2d: cocos2d: ERROR: Failed to compile 
shader: 

precision mediump float; 
uniform mat4 CC PMatrix; 
uniform mat4 CC MVMatrix; 
uniform mat4 CC MVPMatrix; 
uniform vec4 CC Time; 
uniform vec4 CC SinTime; 
uniform vec4 CC CosTime; 
uniform vec4 CC Random1; 
//CC INCLUDES END 


$ifdef GL ES 
precision mediump float; 
Sendif 
uniform samplerzD u texture; 
varying vec2 v texCoord; 
varying vecå v fragmentColor; 
void main(void) 
{ 
// Convert to greyscale using NTSC 
weightings 
float grey = dotí(texture2D£(u texture, 
v texCoord).rgb, мес3 (0.299, 0.587, 8.114)); 
gl FragColor = ve4díqgrey, grey, grey, 1.9); 
I 


cocos2d: cocos2d: ERROR: 8:21: Call to 
undeclared function 've4' 


15-4 ”shader 运 行 时 报错 
不 仅 会 报错 ， 运 行 时 程序 还 会 强制 退出 ， 所 以 在 使 用 shader 程 序 时 一 定 要 充分 测试 来 保证 程序 的 正确 性 。 
另外 需要 注意 shader 的 传递 性 ， 首 先 来 看 Node 类 的 setShaderProgram 冰 数 代码 ， 见 代码 清单 15-10。 


代码 清单 15-10 ѕеїЅһадегРгодгатт 19 


void Node::setShaderProgram(GLProgram *pShaderProgram) 


{ 


CC SAFE RETAIN (pShaderProgram); 


CC SAFE RELEASE( shaderProgram); 
_ ShaderProgram = pShaderProgram; 


} 


可 以 看 到 ，Node 只 是 给 他 自己 设置 了 专属 的 “_shaderProgram” 对 象 ， 并 没有 往 子 节 点 “传递 ”， 这 样 做 有 利 有 次， 好 处 就 是 即使 是 你 的 父 节 点 也 不 能 决定 你 的 shader 方 式 ， 相 对 比较 灵活 ， 不 好 的 
地 方 就 是 这 常常 让 你 困惑 ， 为 什么 设置 了 shader 效 果 时 并 没有 显示 出 来 ， 而 且 也 没有 报错 ， 其 实 你 只 设置 了 父 节 点 ， 父 节点 不 会 往 下 传递 shader 效 果 ， 而 这 个 父 节点 可 能 只 是 空 的 Node 容 器 ， 比 如 实际 使 
用 中 设置 ControlButton 类 的 按钮 灰 化 时 会 出 现 这 种 情况 ， 正 确 的 做 法 是 遍历 子 节点 并 为 子 节点 设置 shader， 具 体 的 实现 方法 见 代 码 清单 15-11。 


代码 清单 15-11 遍历 子 节点 并 设置 shader 


Array * children = button-»getChildren(); 
for(int і = 0;i < children-»count();i ++){ 
( (Node *)children-»getObjectAtIndex (i)) 
-»setShaderProgram(greyShader); 


) 


15.5 ”本 童 小 结 


本 章 介 绍 Cocos2D-X 中 使 用 shader， 首 先 对 着 色 器 语言 进行 了 介绍 ， 着 色 器 语言 是 C 语 言 的 一 个 变种 ， 加 入 了 一 些 扩 展 ， 然 后 介绍 了 shader 的 运行 原理 和 步骤， 在 此 基础 上 进一步 介绍 shader 的 在 
Cocos2D-X 中 使 用 的 两 个 相关 类 GLProgram 和 shaderCache， 最 后 通过 图 片 灰 化 在 Cocos2D-X 中 的 使 用 ,介绍 了 shader 在 Cocos2D-X 中 使 用 的 注意 事项 。 学 习 本 章 ， 要 在 了 解 shader 原 理 的 基础 上 学 习 
Cocos2D-X 的 接口 ， 这 样 才 不 会 在 使 用 中 出 现 问题 和 困惑 。 


第 16 章 ”Cocos2D-X 相 关 的 编辑 器 


使 用 游戏 引擎 开发 的 一 大 优势 就 是 可 以 提高 开发 效率 ， 避 免 代码 的 重复 编写 等 。 很 多 游戏 引擎 都 提供 了 可 视 化 的 编辑 器 ， 可 以 通过 所 见 即 所 得 的 方式 编辑 游戏 场景 和 界面 ， 无 顷 用 堆砌 代码 的 方式 来 完 
成 界面 的 初始 化 。 作 为 一 个 出 色 的 游戏 引擎 既 要 给 予 开发 者 足够 的 发 挥 空间 ， 也 要 有 相应 的 可 视 化 编辑 工具 来 方便 开发 者 ， 而 Cocos2D-X 作 为 一 款 开源 游戏 引擎 ， 之 前 的 设计 给 了 开发 者 更 多 空间 。 而 作为 
一 款 优秀 的 开发 引擎 ，Cocos2D-X 的 工具 链 缺 失 一 直 是 一 个 遗憾 ， 在 Cocos2D-X 2.0 时 代 ， 最 常用 的 编辑 器 是 CocosBuilder， 它 实际 上 是 由 Cocos2D-iPhone 和 Cocos2D 创 始 团 队 负 责 开 发 的 ， 目 前 已 经 停 
止 了 更 新 和 维护 ; 2013 年 春季 的 触 控 开 发 者 大 会 上 ， 触 控 科技 发 布 了 另 一 套 开 发 工具 CocoStudio， 目 前 成 为 了 Cocos2D-X 的 官方 开发 工具 ， 随 着 不 断 的 更 新 与 维护 ，Cocostudio 在 易 用 性 方面 有 很 大 的 提 
升 ， 逐 渐 成 为 开发 者 首选 。 


两 个 工具 适用 的 平台 也 不 同 ，CocosBuilder 适 用 于 Mac 平 台 ，CocoStudio 适 用 于 Windows 平 台 。 本 章 就 介绍 CocosBuilder 和 CocoStudio 编 辑 器 的 使 用 ， 以 及 如 何 将 工程 导入 Cocos2D-X 中 使 用 。 


16.1 CocosBuilder 简 介 
CocosBuilder 是 一 款 免 费 的 图 形 化 编辑 器 ， 用 于 放置 精灵 、 布 景 层 及 场景 供 Cocos2D-iPhone 和 Cocos2D-X 使 用 ， 它 可 精确 化 和 快速 化 地 编辑 菜单 界面 和 其 他 界面 。 不 仅 如 此 ，CocosBuilder 还 可 以 创 
建 关卡 、 粒 子 系统 和 任何 Cocos2D 中 的 节点 类 对 象 ， 而且 Cocos-Builder 也 是 开源 的 。 


可 以 通过 官方 网 站 (http://cocosbuilder.com/) 下 载 CocosBuilder， 下 载 后 解压 文件 双击 便 可 运行 CocosBuilder， 同 样 CocosBuilder 的 使 用 范例 也 可 以 在 官方 网 站 下 载 ， 本 章 的 后 面 就 会 讲解 
CocosBuilder 的 使 用 。 需 要 说 明 的 是 ， 目 前 CocosBuilder 编 辑 器 只 有 支持 Mac 的 版 本 ， 本 书 成 书 之 时 的 最 新 版 本 是 3.0， 这 个 工具 的 开发 团队 已 经 停止 了 维护 和 更 新 。CocosBuilder 的 运行 效果 如 图 16-1 所 


示 。 
16.1.1 CocosBuilder 菜 单 操 作 


下 面 介 绍 CocosBuilder 的 菜单 功能 。 
1) 文件 菜单 ， 包 括 文 件 的 打开 、 新 建 和 保存 等 ， 如 图 16-2 所 示 。 


2) 设置 项 目 属性 ， 打 开 文 件 时 弹出 选择 文件 的 对 话 框 ， 可 以 在 项 目 属性 部 分 设置 资源 文件 夹 等 项 目 属 性 ,项 目 属性 的 对 话 框 如 图 16-3 所 示 。 
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图 16-2 ”在 CocosBuilder 中 打开 文件 


Resource paths 


Resources 


(М JavaScript based project 
Start ccb-file name: | Main5Scene | 


Supported device orientations: 


Landscape Landscape 
left right 


图 16-3 ”设置 项 目 属性 


可 以 设置 的 属性 内 容 包 括 资 源 路 径 。 需 要 注意 的 是 ， 同 一 个 项 目 可 以 有 多 个 资源 路 径 。 另 外 需要 选择 是 否 使 用 JavaScript 开 发 ， 可 以 直接 使 用 JavaScript 为 界面 开发 脚本 ， 另 外 需要 选 定 项 目 开始 界面 和 
横竖 屏 。 


3) 设置 导出 属性 ， 可 以 分 别 设置 OS、Android 和 HTML5 的 导出 ， 包 括 适 配 分 辨 率 、 导 出 路 径 等 ， 导 出 格式 只 有 ccbi 可 以 选择 。 另 外 可 以 设置 工程 文件 的 导出 路 径 和 导出 格式 等 信息 。 如 图 16-4 所 示 。 
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图 16-4 设置 导出 属性 


Д) 编辑 菜单 ， 包 括 撤销 / 重 做 、 剪 切 、 复 制 、 粘 贴 ， 以 及 作为 子 项 粘贴 、 删 除 等 ， 这 点 往往 被 忽略 ， 因 为 不 同 界面 间 可 能 有 共用 的 UI 布局 等 ， 可 以 把 它们 放 在 同一 个 节点 上 编辑 一 次 ,然后 其 他 界面 复 
制 就 可 以 了 ， 另 外 包括 查找 、 蔡 换 等 ， 如 图 16-5 所 示 。 


5) 对 象 菜单 ， 可 添加 对 象 ， 包 括 节 点 类 、 布 景 层 、 颜 色 布 景 层 、 渐 变 布景 层 、 滚 动 视图 类 、 菜 单 、 菜 单项 类 、 标 签 (系统 字 和 美术 字 ) 、 
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图 16-5 ”编辑 菜单 的 列表 


场景 或 者 作为 子 项 来 加 入 布景 层 中 ， 还 可 以 移动 和 对 齐 子 项 等 ， 如 图 16-6 所 示 。 


6) 操作 对 象 菜单 ， 如 图 16-7 所 示 。 


7) 视图 菜单 列表 ， 如 图 16-8 所 示 。 视 图 菜单 列表 中 包括 目前 的 效果 区 域内 的 缩放 、 重 置 等 视图 参数 ， 还 可 以 设置 有 无 边框 。 
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粒子 系统 、 精 灵 类 、 九 宫 格 精灵 类 和 按钮 类 等 ， 可 以 直接 加 入 
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图 16-9 动画 菜单 


8) 动画 编辑 菜单 ， 如 图 16-9 所 示 。 第 5 章 介绍 了 Cocos2D-X 中 各 种 动画 类 ， 可 以 使 用 CocosBuilder 把 这 些 动作 拼接 成 动画 ， 在 菜单 里 可 以 播放 动画 ， 插 入 关键 帧 和 选择 需要 编辑 的 时 间 线 等 ， 选 择 界 
面 如 图 16-10 所 示 。 


Intro 00:02:00 Г) 
Idle 00:10:00 A 
Wave 00:03:00 (] 
Jump 00:02:00 [г] 
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— | Cancel | 


图 16-10 ”时 间 线 选择 界面 


9) 窗口 菜单 列表 ， 如 图 16-11 所 示 。 窗 口 菜 单 中 包括 最 小 化 等 ， 另 外 还 有 CocosPlayer 控 制 台 ， 主 要 用 于 直接 把 修改 好 的 资源 文件 推送 到 测试 机 上 测试 。 


16.1.2 对象 属性 编辑 


之 前 已 经 说 过 ，CocosBuilder 中 可 以 添加 节点 类 Node 及 其 子 类 ， 包 括 : 节点 类 、 布 景 层 、 颜 色 布 景 层 、 渐 变 布景 层 、 滚 动 视图 类 、 菜 单 、 菜 单项 类 、 标 签 (系统 字 和 美术 字 ) 、 粒 子 系统 、 精 灵 类 、 
九宫 格 精灵 类 和 按钮 类 等 。 这 些 对 象 的 属性 都 是 可 以 编辑 的 ， 不 需要 在 程序 中 再 用 调用 函数 的 方法 来 设置 ， 这 样 提高 了 开发 效率 。 


(1) 节点 类 及 其 子 类 属性 添加 


属性 菜单 分 层 添加 ， 包 括 节 点 类 和 精灵 类 相关 的 属性 编辑 区 域 ， 每 个 对 象 的 第 一 栏 是 名 称 ， 选 择 C+ + 开发 和 Javascript 是 不 一 样 的， 如 图 16-12 所 示 。 
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16-12 ”制定 控制 类 或 者 JavaSctipt 控 制 文件 
在 Document 选 项 下 选择 "JavaScript Controlled” 就 可 以 切换 这 两 种 状态 ， 这 两 种 状态 分 别 指定 这 个 节点 从 属 的 类 或 者 JavasScript 文 件 。 
节点 类 和 其 子 类 精灵 类 如 图 16-13 所 示 。 


这 些 属性 包括 位 置 坐标 ， 可 以 选择 不 同方 式 计算 金额 节点 的 位 置 ， 然 后 是 坐标 的 数值 ， 包 括 对 象 的 宽 和 高 、 锁 点 、 缩 放 的 比例 、 旋 转 的 角度 、 标 签 等， 还 可 以 选择 忽略 锚 点 和 该 节点 是 否 可 见 。 
的 属性 包括 贴图 、 透 明度 、 颜 色 、x 轴 和 y 轴 的 和 镜像， 渐变 颜色 等 。 


(2) 按键 控件 属性 的 添加 


编辑 区 域 如 图 16-14 所 示 。 按 键 控件 的 属性 编辑 区 域 包 括 标题 、 字 体 、 字 号 、 锁 点 、 大 小 、 是 否 按 下 时 缩放 ， 另 外 还 有 按键 正常 状态 、 按 下 状态 和 无 效 状 态 的 贴图 名 称 。 
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图 16-13 ”节点 类 和 其 子 类 精灵 类 的 属性 编辑 区 域 
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图 16-14 ”按键 控件 的 属性 编辑 区 域 


(3) 字体 标签 的 属性 添加 
编辑 区 域 如 图 16-15 所 示 。 字 体 中 包括 字体 名 称 、 字 号 、 不 透明 、 颜 色 、 对 齐 方式 和 字体 内 容 等 内 容 。 


CCLableBMFont 字 体 设置 的 属性 编辑 区 域 如 图 16-17 所 示 。 
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图 16-15 ”字体 标签 的 属性 编辑 区 域 
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图 16-16 ”字体 标签 的 属性 编辑 区 域 
CCLableBMFont 字 体 设 置 的 属性 包括 字体 文件 、 不 透明 值 ， 渐 变 的 设置 和 文字 内 容 等 属性 。 
(4) 粒子 系统 属性 的 添加 


如 图 16-17 和 图 16-18 所 示 为 粒子 系统 的 属性 编辑 区 域 。 
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图 16-17 粒子 系统 属性 编辑 区 域 一 


Cravity mode 
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图 16-18 ”粒子 系统 属性 编辑 区 域 二 


关于 粒子 系统 CCParticlesystem 类 的 属性 在 第 14 章 进行 了 详细 介绍 ， 总 之 CocosBuilder 如 同 集成 了 Cocos2D 系 列 引擎 专用 的 粒子 编辑 器 ， 编 辑 的 效果 可 以 随时 修改 。 粒 子 编辑 效果 如 图 16-19 所 示 。 


图 16-19 ”粒子 编辑 效果 


(5) CCScrollView 滚 动 视图 的 属性 添加 
编辑 界面 如 图 16-20 所 示 。 


CCScrollView 滚 动 视图 就 是 在 节点 类 CCNode 的 基础 上 加 入 CCScrollView 滚 动 视 图 的 容器 等 ， 容 器 将 在 另外 一 个 CCB 文 件 内 定义 ， 定 义 的 界面 如 图 16-21 所 示 。 
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图 16-20 滚动 视图 的 属性 编辑 
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图 16-21 CCScrollView 滚 动 视 图 的 容器 定义 
CCsScrollView 滚 动 视图 作为 一 个 容器 可 以 装载 一 个 节点 ， 当 节点 的 大 小 大 于 容器 大 小 时 ， 就 可 以 拖 动 图 片 在 CCScrollView 里 移动 ， 这 个 节点 是 一 个 精灵 类 对 象 。 
(6) 渐变 布景 层 的 属性 添加 
设置 区 域 如 图 16-22 所 示 。 设 置 的 属性 包括 开始 /结束 的 颜色 和 不 透明 度 等 属性 。 
(7) 菜单 项 的 属性 添加 
设置 区 域 如 图 16-23 所 示 ， 其 中 包括 菜单 项 回调 函数 以 及 三 种 按键 状态 下 的 图 片 等 属性 。 
(8) 引用 其 他 文件 


不 仅 可 以 定义 单独 的 空间 ， 还 可 以 将 定义 的 布局 形式 作为 一 个 整体 在 其 他 布局 中 重用 ， 将 布局 定义 在 一 个 CCB 文 件 中 ， 然 后 通过 在 其 他 布局 创建 的 CCbFile 类 中 重用 即 可 ，CCbFile 类 的 属性 定义 区 域 如 
图 16-24 所 示 。 
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图 16-24 CCbFile 类 的 属性 定义 区 域 


(9) 动画 编辑 


可 以 在 下 方 的 动画 编辑 界面 编辑 动画 ， 如 图 16-25 所 示 。 
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图 16-25 动画 编辑 界面 
№4 = 


点 击 对 象 边 上 的 小 三 角 展 开动 作 的 时 间 线 ， 可 以 通过 动画 菜单 中 的 插入 关键 帧 加 入 时 间 线 中 的 点 ， 双 击 该 点 可 以 在 弹出 的 界面 中 编辑 该 点 相关 数值 ， 点 击 上 面 一 栏 的 运行 按钮 可 以 预览 动画 。 


CocosBuilder 作 为 Cocos2D-iPhone 和 Cocos2D-X 的 可 视 化 编辑 器 ， 它 的 最 终 目的 还 是 导出 可 以 被 引擎 使 用 的 文件 并 被 引擎 所 使 用 ， 本 节 介绍 CocosBuilder 在 Cocos2D-X 中 的 使 用 。 
16.1.3 ”CocosBuilder 在 Cocos2D-X 中 常用 的 相关 类 
CocosBuilder 导 出 的 工程 文件 首先 要 通过 NodeLoaderLibrary 类 ，NodeLoader 类 和 CCBReader 类 的 载 入 才能 在 程序 当中 使 用 。 


1.NodeLoaderLibrary 类 


NodeLoaderLibrary 类 的 继承 关系 如 图 16-26 所 示 。 


NodeLoaderLibrary 


图 16-26 NodeLoadetLibratry 类 的 继承 关系 


NodeLoaderLibrary 类 的 相关 函数 见 表 16-1。 


表 16-1  NodeLoaderLibrary % 065 48 X vf žk 


注册 节点 载 人 人 类， 第 一 个 参数 为 类 名 ， 和 第 二 个 参数 为 需要 载 和 的 类 对 
- Л 


unregisterNodeLoader 取消 注册 


getNodeLoader HW eid А.Ж 获得 相应 的 节点 载 人 类 


registerNodeLoader 


注意 ， 使 用 NodeLoaderLibrary 类 时 需要 调用 函数 并 注册 相应 节点 的 载 入 类 NodeLoader， 而 工程 文件 中 的 每 一 个 “界面 ”也 对 应 一 个 自己 的 节点 载 入 类 。 


2.NodeLoader 类 


节点 的 载 入 类 NodeLoader 的 继承 关系 如 图 16-27 所 示 。 


NodeLoader 


图 16-27 NodeLoader 的 继承 关系 


NodeLoader 类 在 测试 项 目 中 的 用 法 如 代码 清单 16-1 所 示 。 该 段 代码 出 自 tests 项 目 中 “ExtensionsTest/CocosBuilderTest/HelloCocosBuilder” 路 径 下 ， 继 承 自 NodeLoader 类 
HelloCocosBuilderLayerLoader 的 代码 。 


代码 清单 16-1 NodeLoader 类 在 测试 项 目 中 的 使 用 


#ifndef  HELLOCOCOSBUILDERLAYERLOADER H | 
#деҒіпе  HELLOCOCOSBUILDERLAYERLOADER H 
dinclude "HelloCocosBuilderLayer.h" 

* 


声明 */ 
lass CCBReader; 
class He IGUBEDODH dsr Duy SHOE : public cocosbuilder::LayerLoader { 


B 


CCB STATIC NEW AUTORELEASE OBJECT METHOD 

(HelloCocosBuilderLayerLoader, loader); 

protected: 
CCB VIRTUAL | 
(HelloCocosBuilderLayer); 


NEW AUTORELEASE CREATECCNODE METHOD 


L 


3.CCBReaderzé 


在 NodeLoaderLibrary 类 注册 完成 之 后 ， 使 用 NodeLoaderLibrary 类 作为 参数 来 定义 CCBReader， 通 过 CCBReader 类 可 以 获得 节点 。CCBReader 类 的 继承 关系 如 图 16-28 所 示 。 


CCBReader 类 的 相关 函数 见 表 16-2，。 


Az 
#5 


readNodeGraphFromFile 


getOwner 


isJSControlled 


CCB SELECTORRESOLVER CCCONTROL GLUE 


getLoadedSpriteSheet 


16.1.4 实战 : CocosBuilder 应 用 


数 名 


图 16-28 CCBReadet 类 的 继承 关系 


表 16-2 CCBReader 3€ #7 48 X yf Zik 


f£Cocos2D-X 3.0 中 ，tests 示 例 项 目 中 有 Cocos2D-X 使 用 的 CocosBuilder 实 例 ， 这 个 实例 与 一 般 游戏 的 构造 类 似 。 


是 否 使 用 JavaSeript 
ЕЛНЫ 


M HR 006 


首先 ， 载 入 工程 文件 并 初始 化 ， 有 具体 的 步骤 如 代码 清单 16-2 所 示 ， 这 段 代码 出 自 tests 项 目 中 “ExtensionsTest/CocosBuilderTest/” 路 径 下 的 CocosBuilderTest.cpp 文 件 。 


代码 清单 16-2 


载 入 工程 文件 和 初始 化 


void Cocosl 


// 
创建 并 获得 节 


BuilderTestScene::runThisTest( 


点 载 入 类 


) ( 


NodeLoaderLibrary * ccNodeLoaderLibrary = 


NodeLoaderLibrary::newDefaultCCNodeLoaderLibrary (); 


// 
注册 需要 载 入 的 场景 


ccNodeLoaderLibrary-»regis! 


"HelloCocosBuilderLlayer", 
HelloCocosBuilderLayerLoader::loader 
cocosbuilder::CCBReader * ccbReader = new 
cocosbuilder::CCBReader (ccNodeLoaderLibrary); 


// 
读 取 文 件 ， 获 得 父 节点 
auto node = ccbReader-»readNodeGraphFromFile|( 


"сср/оЁ 


Еісіа1/рор/", "ccb/HelloCocosl 


terCCNodeLoader ( 


0); 


Builder.ccbi", this); 


ccbReader-»autorelease(); 


// 
将 节点 加 入 场 


if(node != NULL) { 


景 中 


this->addChild (node); 


} 


Director::getInstance ()->replaceScene (this); 


这 个 函数 提供 了 载 入 一 个 场景 的 流程 ， 首 先 通 过 LayerLoader 类 注册 NodeLoaderLibrary， 然 后 通过 NodeLoaderLibrary 类 定义 CCBReader 类 的 实例 ， 最 后 通过 readNodeGraphFromFile 函 数 获得 父 
节点 ， 并 把 父 节点 加 入 场景 中 ， 即 可 显示 相应 的 场景 。 


载 入 基 个 场景 时 ， 通 过 onResolveCCBCCControlselector 函 数 将 我 们 在 编辑 器 中 定义 的 相应 按钮 时 指定 的 函数 名 ， 对 应 为 本 类 中 相应 的 函数 名 ， 如 代码 清单 16-3 所 示 。 调 用 
ССВ SELECTORRESOLVER CCCONTROL GLUE 安 来 注册 这 些 函 数 ， 其 中 第 一 个 参数 为 处 理 回调 的 类 ， 第 二 个 参数 是 在 编辑 器 中 定义 的 函数 名 ， 第 三 个 参数 是 处 理 回调 函 数 类 中 对 应 的 函数 名 。 


代码 清单 16-3 onResolveCCBCCControlSelectorggzi 


SEL CCControlHandler 
HelloCocosBuilderLayer::onResolveCCBCCControlSelector 
ud * | e d CCString * pSelectorName) { 


MIB EOM UR вЫ 尺码 中 实际 函数 的 对 应 关系 
CCB SELECTORRESOLVER CCCONTROL GLUE (this, 
"onMenuTestClicked", HelloCocosBuilderLayer::onMenuTestClicked); 
CCB SELECTORRESOLVER CCCONTROL GLUE (this, 
"onSpriteTestClicked", 
HelloCocosBuilderLayer::onSpriteTestClicked); 
CCB SELECTORRESOLVER CCCONTROL GLUE (this, 
"onButtonTestClicked", 
HelloCocosBuilderLayer::onButtonTestClicked); 
CCB SELECTORRESOLVER CCCONTROL GLUE (this, 
"onLabelTestClicked", 
HelloCocosBuilderLayer::onLabelTestClickeg); 
CCB SELECTORRESOLVER CCCONTROL GLUE (this, 
"onParticleSystemTestClicke 
HelloCocosBuilderLayer::onParticleSystemTestClicked); 
CCB SELECTORRESOLVER CCCONTROL GLUE (this, 
"onScrollViewTestClicked", E 
HelloCocosBuilderLayer: :onScrollViewTestClicked); 
return NULL; 


etm i 如 代码 清单 16-4 所 示 。 调 用 CCB_MEMBERVARIABLEASSIGNER_GLUE 宏 注册 这 些 节点 ， 第 一 个 参数 是 拥 
有 这 个 节点 的 类 ， 第 二 个 参数 是 编辑 器 中 节点 的 名 称 ， 第 三 个 参数 是 实际 代码 中 对 应 的 节点 。 


代码 清单 16-4 ”onAssignCCBMemberVariable 函 数 


bool шека тауа соро овоо еее х pTarget, 
CCString * pMemberVariableName, CCNode * pNode) { 


IRE MEREAR AR а FR c AERE REO 
CCB MEMBERVARIABLEASSIGNER GLUE (this, "mBurstSprite", 
CCSprite *, this-»mBurstSprite); 
CCB MEMBERVAR. ABLEASSIGNER GLUE(this, "mTestTitleLabelTTF", 
CCLabelTTF *, this-»mTestTitleLabelTTF); 
return false; 


相应 的 按钮 按 下 的 回调 函数 的 实现 如 代码 清单 16-5 所 示 。 


代码 清单 16-5 ”按钮 的 回调 函数 


// 
切换 菜单 测试 场景 按钮 的 回调 函数 
void HelloCocosBuilderLayer: :onMenuTestClicked(const char * 
pCCcBFileName, const char * nodeName,, ControlEvent pCCControlEvent) { 
this-»openTest ("ccb/MenuTest.ccbi", "MenuTestLayer", 
MenuTestLayerLoader::loader()); 


} 


// 
切换 精灵 测试 场景 按钮 的 回调 函数 
void HelloCocosBuilderLayer::onSpriteTestClicked(CCObject * pSender, 
cocos2d::extension::CCControlEvent pCCControlEvent) { 
this-»openTest ("ccb/SpriteTest.ccbi", "SpriteTestLayer", 
SpriteTestLayerLoader::loader()); 


} 


// 

切换 按钮 测试 场景 按钮 的 回调 函数 

void HelloCocosBuilderLayer::onButtonTestClicked(CCObject * pSender, 
cocos2d::extension::CCControlEvent pCCControlEvent) { 

this-»openTest ("ccb/ButtonTest.ccbi", "ButtonTestLayer", 

ButtonTestLayerLoader::loader()); 


) 
// 
切换 标签 测试 场景 按钮 的 回调 函数 


void HelloCocosBuilderLayer::onLabelTestClicked (CCObject * pSender, 
cocos2d::extension::CCControlEvent pCCControlEvent) { 

this-»openTest ("ccb/LabelTest.ccbi", "LabelTestLayer", 

LabelTestLayerLoader::loader()); 


} 


// 
切换 粒子 系统 测试 场景 按钮 的 回调 函数 
void HelloCocosBuilderLayer::onParticleSystemTestClicked(CCObject * pSender, 
cocos2d::extension::CCControlEvent pCCControlEvent) { 
this-»openTest ("ccb/ParticleSystemTest.ccbi", 
"ParticleSystemTestLlayer", 
ParticleSystemTestLayerLoader::loader()); 


} 
// 
切换 滚动 视图 测试 场景 按钮 的 回调 函数 
void HelloCocosBuilderLayer::onScrollViewTestClicked (CCObject * pSender, 
cocos2d::extension::CCControlEvent pCCControlEvent) { 
this-»openTest ("ccb/ScrollViewTest.ccbi", 
"ScrollViewTestLayer", ScrollViewTestLayerLoader::loader()); 


当 按 钮 按 下 时 ， 这 六 个 函数 都 调用 openTest 浮 数 切 换 其 他 的 场景 。openTest 浮 数 是 在 项 目 中 封装 好 的 、 载 入 相应 场景 的 整个 流程 的 函数 ， 过 程 与 开始 载 入 helloworld 场 景 是 一 样 的， 也 就 是 说 ， 按 下 
主 菜单 的 每 一 个 按钮 都 会 调用 相关 函数 载 入 一 个 ccbi 文 件 ， 以 创建 新 的 场景 ，openTest 国 数 如 代码 清单 16-6 所 示 。 


代码 清单 16-6 ”切换 其 他 场景 


void HelloCocosBuilderLayer::openTest(const char * pCCBFileName, const char * 
c CCNodeLoader * pCCNodeLoader) { 


"T TT Ж 
NodeLoaderLibrary * ccNodeLoaderLibrary = 
NodeLoaderLibrary::newDefaultCCNodeLoaderLibrary (); 
// 


注册 需要 载 入 的 场景 
ccNodeLoaderLibrary-»registerNodeLoader ("TestHeaderLayer", 
TestHeaderLayerLoader::loader()); 
f(pCCNodeName != NULL && pCCNodeLoader != NULL) { 
ccNodeLoaderLibrary-»registerNodeLoader ( 
pCCNodeName, pCCNodeLoader); 


H- 


} 
cocosbuilder::CCBReader * ccbReader = new 
cocosbuilder::CCBReader (ccNodeLoaderLibrary); 
ccbReader-»autorelease (); 


// 

读 取 文 件 ， 获 得 父 节点 
Node * node = ccbReader-»readNodeGraphFromFile|( 
"Ccb/official/pub/", pCCBFileName, this); 
this-»mTestTitleLabelTTF-»setString (pCCBPFileName); 


// 
将 节点 加 入 场景 中 
Scene * Scene = Scene: :create (); 
if(node != NULL) { 
scene-»addChild (node); 


ccColor3B transitionColor; 


transitionColor.r = 0; 
transitionColor.g = 0; 
transitionColor.b = 0; 


/ / 

压 入 新 的 场景 并 调用 过 程 动画 进入 新 的 场景 
Director: :getInstance () ->pushScene ( 
TransitionFade::create(0.5f, scene, transitionColor)); 


当 节 点 被 载 入 时 ,会 回调 onNodeLoaded 遂 数 ， 可 以 为 其 中 某 个 节点 加 入 动作 ， 加 入 动作 的 具体 方法 如 代码 清单 16-7 所 示 。 


代码 清单 16-7 onNodeLoaded 函 数 


void HelloCocosBuilderLayer::onNodeLoaded (cocos2d::Node * pNode, 
cocosbuilder::NodeLoader * pNodeLoader) { 


// 
定义 旋转 动作 
RotateBy * ccRotateBy = RotateBy::create(0.5f, 10); 
RepeatForever * ccRepeatForever - 
RepeatForever::create (ccRotateBy); 

// 
运行 旋转 动作 


this-»mBurstSprite-»runAction (ccRepeatForever); 
} 


整个 界面 的 运行 效果 如 图 16-29 所 示 。 
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图 16-29 ”CocosBuildet 测 试 示例 运行 效果 


在 MenuTestLayer 类 中 ， 依 然 使 用 onResolveCCBCCMenultemselector 回 调 函 数 为 相应 的 菜单 项 确定 对 应 的 回调 函数 ， 该 界面 一 共有 三 个 按钮 ， 对 应 三 个 按钮 被 按 下 会 调用 相应 的 回调 函数 ， 回 调子 
数 被 按 下 下 面 的 标签 会 显示 是 哪个 按钮 被 按 下 。 


运行 效果 如 图 16-30 所 示 ， 目 前 为 没有 按钮 被 按 下 的 状态 。 


另外 ， 在 界面 上 点 击 箭头 可 以 回 到 之 前 的 界面 ， 这 部 分 是 单独 定义 的 一 个 页 面 布 局 ， 出 自 TestHeaderLayer 类 。 该 界面 主要 做 两 件 事 情 ， 一 个 是 在 标签 上 显示 目前 的 ccbi 文 件 名 ， 另 外 一 个 就 是 箭头 按 
钮 ， 在 该 按钮 调用 的 回调 函数 中 处 理 返 回 到 主 菜单 的 逻辑 ， 即 调用 导演 类 的 popScene 函 数 回 到 之 前 的 界面 ， 回 退 的 方法 如 代码 清单 16-8 所 示 。 


coby MenuTest.cebi 


No button pressed yet 


图 16-30 ”菜单 示例 运行 效果 


代码 清单 16-8 调用 导演 类 的 popScene 消 数 回 到 之 前 的 界面 


void TestHeaderLayer: :onBackClicked (cocos2d: :Ref *pSender) { 
Director::getInstance()-»popScene(); 


} 


以 下 展示 一 些 CocosBuilder 制 作 的 界面 场景 的 运行 效果 ， 首 先是 粒子 系统 界面 运行 效果 ， 如 图 16-31 所 示 。 两 个 粒子 效果 均 是 在 第 13 章 中 定义 ， 左 边 的 是 重力 模式 的 粒子 系统 ， 右 边 是 放射 模式 的 粒子 
系统 。 


人 个 cob/ParticleSystemTest.cobi 


Gravity mode Hadius mode 


图 16-31 粒子 系统 界面 运行 效果 


滚动 视图 界面 运行 效果 ， 如 图 16-32 所 示 。 该 界面 就 是 在 13 章 中 定义 的 滚动 视图 ， 可 以 拖 动 图 片 在 视图 框 中 移动 。 


图 16-32 ”滚动 视图 界面 运行 效果 


动画 的 获得 及 播放 见 代 码 清单 16-9， 直 接 通 过 名 字 找 到 就 可 以 了 。 


代码 清单 16-9 ”播放 动画 


mAnimationManager-»runAnimationsForSequenceNamedTweenDuration ("Idle", 0.3f); 


虽然 CocosBuilder 是 2.0 时 代 大 部 分 项 目 选 择 的 编辑 器 ， 但 是 它 也 有 很 多 不 方便 的 地 方 ， 比 如 操作 时 ， 当 你 想 拖 动 一 个 节点 时 ， 有 时 会 造成 锚 点 改变 或 者 缩放 ， 有 时 还 会 出 现 导出 的 项 目 出 错 等 ， 但 是 由 
于 它 已 经 不 再 更 新 ， 随 着 Cocostudio 的 不 断 完善 ， 相 信 它 会 成 为 其 他 开发 者 的 选择 。 


16.2 СосоЅіиаіо у 


Cocostudio 由 触 控 科 技 引 警 团队 研发 ， 是 一 款 基 于 Cocos2D-X 的 免费 游戏 开发 工具 集 ， 它 由 四 个 自 工具 组 成 ， 包 括 界面 编辑 器 、 动 画 编辑 器 、 场 景 编 辑 器 和 数据 编辑 器 ， 由 设计 程序 员 、 美 术 与 策划 
这 些 分 工 不 同 的 人 员 使 用 。 本 书 成 书 之 时 ，CocoStudio 最 新 版 本 是 1.3.0.1。CocoSstudio 也 会 随 着 Cocos2D-X 更 新 ， 目 前 支持 Windows XP 以 上 的 系统 版 本 ， 正 在 开发 的 2.0 版 本 是 跨 平台 编辑 器 ， 将 支持 
Mac 版 本 ，CocoStudio 及 其 下 属 的 4 个 编辑 器 的 图 标 如 图 16-33 所 示 。 


登录 CocoStudio 的 官网 (http://www.cocostudio.org/) 下 载 最 新 版 本 ， 下 载 后 运行 文件 根据 提示 就 可 以 安装 了 ， 运 行 效 果 如 图 16-34 所 示 。 


图 16-33 ”CocoStudio 及 其 包含 的 工具 图 标 


Welcome to CocoStudio v1.3.0.1 


Animation Editor UI Editor Scene Editor Data Editor 


图 16-34  CocoStudiois 47 Ў 


然后 就 可 以 选择 一 个 编辑 器 进入 编辑 工作 了 。 


在 游戏 项 目 中 ， 最 常用 的 编辑 数据 的 方式 应 该 就 是 Excel 了 ，Cocostudio 的 数据 编辑 器 就 是 导入 Excel 并 把 数据 导出 成 son， 导 入 Excel 后 运行 效果 如 图 16-35 所 示 。 


图 16-35 “数据 编辑 器 导入 Excel 后 的 运行 效果 


导出 设置 如 图 16-36 所 示 。 


Set Export File 
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E636 ”导出 设置 


可 以 设置 路 径 和 导出 的 文件 的 命名 以 及 导出 哪个 工作 单 等 ， 导 出 的 son 文 件 可 以 在 游戏 中 读 取 并 使 用 ， 但 是 一 般 的 网 游 都 要 在 后 端 使 用 数据 编辑 器 导出 的 文件 作为 配置 。 


16.22 场景 编辑 器 


场景 编辑 器 负责 整合 整个 游戏 的 资源 ， 类 似 于 Unity3D 引 警 ， 在 场景 编辑 器 中 导入 引擎 的 目录 ， 就 可 以 在 编辑 器 中 所 见 即 所 得 地 获得 当前 的 运行 效果 。 场 景 编辑 器 组 件 是 组 成 场景 界面 的 基本 元 素 。 每 
个 中 组 件 都 又 是 特定 组 件 的 载体 ， 可 以 通过 这 些 控 件 间 的 组 合 来 设计 出 丰富 的 场景 ， 包 括 精 灵 组 件 、 地 图 组 件 、 粒 子 组 件 、 骨 骼 组 件 、 声 音 组 件 及 UI 组 件 ， 运 行 效果 如 图 16-37 所 示 。 


FightScene- 场 景 编辑 器 
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图 16-37 场景 编辑 器 


最 左 侧 的 组 件 选 择 栏 ， 可 以 直接 在 控件 列表 区 选中 需要 的 控件 ， 直 接 拖 动 到 演 染 区 或 者 对 象 列表 快速 创建 控件 ， 创 建 后 ， 可 以 在 最 右 侧 的 属性 编辑 栏 中 编辑 相应 属性 ， 或 者 是 导入 已 经 编辑 好 的 Ul 或 者 
动画 组 件 的 JSON 文 件 ， 就 可 以 编辑 游戏 场景 了 


最 新 版 本 的 场景 编辑 器 还 新 增 了 触发 器 功能 ， 如 图 16-38 所 示 。 


ALR RRIA 
ЗИФ SHEA ( SceneOnEnter ) 
TriggerO(0) 场 受 进入 ( SceneOnEnter ) 
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条 件 DRAR (IsNodeVisible ) 
节点 时 


mimm (IsNodeVisible ) 


JHE 移动 到 (Movero ) 


移动 到 ( MoveTo ) 


图 16-38 ”场景 编辑 器 触发 器 


可 以 为 触发 器 设置 触发 的 事件 和 条 件 ， 以 及 对 应 的 动作 和 效果 ， 这 样 的 触发 器 省 去 了 大 量 的 if-else 代 码 ， 随 着 这 个 功能 的 完善 ， 不 写 一 行 代 码 实现 一 些 固定 的 效果 已 经 不 是 奢望 。 导 出 设置 如 图 16-39 所 
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图 16-39 场景 编辑 器 导出 设置 
在 引擎 中 使 用 场景 编辑 器 导出 的 文件 的 代码 见 代 码 清单 16-10。 


代码 清单 16-10 RAAR 


// 

读 入 文件 
Node *node = SceneReader::getInstance|() 
-»createNodeWithSceneFile( 
"Scenetest/UIComponentTest/UIComponentTest.json"); 


// 
判断 是 否 为 空 
if (node == nullptr) 


~H 


return nullptr; 


node = node; 


ComRender *render = static cast<ComRender*> 
(_node->getChildByTag (10025) -»getComponent ("GUIComponent")); 
Widget* widget - 
static cast«cocos2d::ui::Widget*» (render-»getNode ()); 
Button* button - 
static cast«Button*» (widget-»getChildByName ("Button 156")); 
button-»addTouchEventListener (this, Е 
toucheventselector (UIComponentTest::touchEvent)); 


读 入 场景 后 ， 可 以 调用 getComponent 获 得 相应 的 组 件 。 


16.2.3 “界面 编辑 器 


界面 的 编辑 往往 在 实际 项 目 开 发 中 占 八成 以 上 的 工作 量 ， 所 以 靠 谱 的 界面 编辑 器 成 为 所 有 Cocos2D-X 使 用 者 共同 的 愿望 ，CocoStudio 界 面 编辑 器 运行 如 图 16-40 所 示 。 
布局 类 似 于 场景 编辑 器 ， 都 是 从 左 到 右 为 由 大 到 小 的 范围 ， 整 个 界面 的 布局 像 一 个 CocosBuilder 的 升级 版 本 ,可 以 从 最 左 侧 的 对 象 栏 拖 动 需要 的 控件 到 界面 上 ， 并 在 属性 栏 编辑 相应 属性 。 
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图 16-40 ”界面 编辑 器 触发 器 


另外 除了 大 家 熟悉 的 UI 控 件 ， 界 面 编 辑 器 还 提供 容器 这 个 组 件 ， 可 以 设置 容器 的 布局 ， 这 也 是 CocoStudio 未 来 的 愿景 ， 把 界面 开发 做 成 依靠 布局 的 ， 类 似 Android 原 生 开发 的 布局 ， 可 选 的 布局 如 图 
16-41 所 示 。 
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图 16-41 界面 编辑 器 布局 选择 


另外 ， 最 新 版 本 还 提供 了 自 定义 控件 扩展 功能 ， 需 要 自己 编写 控件 的 C+ + 文件 和 解析 文件 ， 并 把 编译 生成 的 DLL 文件 覆盖 到 编辑 器 目录 下 就 可 以 了 。 

1) 编写 自 定义 控件 。 

2) 编写 封装 代码 ， 实 现 编辑 器 约定 接口 ,首先 在 构造 中 初始 化 m_GUI， 同 时 调用 父 类 的 Init 方 法 ， 然 后 编写 使 用 “CS_Set” 和 “CS_Get” 作 为 前 经 的 可 设置 属性 。 
3) 编写 Swig 生 成 脚本 ， 修 改 模板 就 可 以 。 

4) 编译 生成 项 目 。 

5) 将 生成 的 动态 库 复 制 到 编辑 器 目录 。 


导出 设置 界面 如 图 16-42 所 示 。 
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图 16-42 ”界面 编辑 器 导出 界面 
在 程序 中 使 用 导出 的 文件 ， 读 入 界面 信息 并 让 它 显示 的 方法 见 代 码 清单 16-11。 


代码 清单 16-11 读 入 界面 


// 

ЖА 

widget = dynamic cast«Layout*»( 
cocostudio::GUIReader::getInstance|() 
-»widgetFromJsonFile ("cocosui/UITest/UITest.json")); 
 uiLayer-»addChild( widget); 

Size screenSize = CCDirector::getInstance()-»getWinSize(); 
Size rootSize = widget-»getSize(); 

 uiLayer-»setPosition( 

Point((screenSize.width - rootSize.width) / 2, 
(screenSize.height - rootSize.height) / 2)); 


Layout* root = 
static cast«Layout*»( uiLayer-»getChildByTag (81)); 


16.24 ”动画 编辑 器 
CocoSstudio 支 持 骨骼 动画 的 编辑 ， 运 行 界 面 如 图 16-43 所 示 。 
编辑 器 支持 主流 的 骨骼 动画 、 序 列 帧 动画 的 制作 与 编辑 ， 也 支持 DragoneBones、Flash 动 画 直 接 导 入 。 具 体 动画 的 制作 过 程 请 参照 官方 文档 【']， 一 般 需 要 美工 制作 骨骼 动画 。 


在 程序 中 使 用 导出 的 文件 见 代 码 清单 16-12。 


A DemoPlayer--z/j #Н1ҢЕ# 
文件 日 m (E) 视图 (V) ) щй (H) HEW 


каш EDC + охе AAE 


E EV 


2 Resources 


Layert4 
Layer27 
Layer26 
Layert5 
Layer17 
Layecr16 
Layer20 
Layer21 


位 置 X:123.36 Ү:-112.55 旋转 150.22 Aa X100 Ү:1.00 — $ 


816-43 ”动画 编辑 器 


代码 清单 16-12 读 入 界面 


// 

读 入 文件 

ArmatureDataManager: :getInstance () -> 
addArmatureFileInfoAsync ("armature/Cowboy.ExportJson", this, 


schedule selector (TestAsynchronousLoading: :dataLoaded) ) ; 
// 

创建 动画 

Armature *armature = nullptr 


armature = Armature::create ("Cowboy"); 
armature-»getAnimation ()-»playWithIndex (0); 
armature-»setScale (0.2f); 
armature-»setPosition (Point (VisibleRect::center().x, 
VisibleRect::center().y/*-100*/)); 

addChild (armature); 


这 个 过 程 和 第 5 章 介绍 的 骨骼 动画 的 使 用 是 一 样 的 。 


[1] 官方 文档 地 址 为 http://upyun.cocimg.com/CocoStudio/helpdoc/v1.0.0.0/zh/index.html。 


163 ”本 章 小 结 


本 章 介 绍 Cocos2D-X 的 编辑 器 的 使 用 ， 以 及 导出 的 工程 如 何在 程序 中 使 用 。 学 习 本 章 ， 使 用 可 以 将 之 前 构建 的 界面 “可 视 化 ”重新 构建 一 遍 。 由 于 CocosBuilder 已 经 不 再 更 新 ，Cocostudio 将 成 为 官 
方 的 编辑 器 ， 相 信 随 着 使 用 人 数 的 逐渐 增加 ，Cocostudio 会 更 加 完善 。 


下 一 章 开始 进入 实战 篇 ， 将 开发 4 个 不 同类 型 的 游戏 。 


. 第 17 章 ” 纵 版 射击 游戏 : BERA 
第 18 章 ”模版 动作 游戏 : FA RE 
第 19 章 ”物理 体育 游戏 : 迷你 世界 杯 


第 20 章 ”消除 游戏 : 天 天 消 豆 豆 


581728 ЯУ: 哨 星 战争 


目前 ， 我 们 已 经 对 Cocos2D-X 的 相关 知识 有 所 了 解 ， 然 而 学 习 这 些 知识 基本 上 就 是 对 使 用 Cocos2D-X 开 了 一 个 头 ， 灵 活 运 用 这 些 知识 开发 出 好 的 游戏 项 目 才 是 我 们 的 目的 。 第 17 章 和 第 18 章 将 通过 两 


个 游戏 实例 〈 纵 版 射击 游戏 和 横 版 动作 游戏 ) ， 进 一 步 学 习 Cocos2D-X 在 游戏 开发 中 的 应 用 ， 通 过 学 习 两 个 完全 不 同 的 游戏 项 目 ， 相 信 你 会 对 Cocos2D-X 和 游戏 开发 有 更 深入 的 认识 ， 本 章 内 容 采 用 
JavaScript 编 写 。 


17.1 ” 纵 版 射击 游戏 的 特点 

纵 版 射击 游戏 是 一 种 比较 传统 的 游戏 ， 在 各 种 游戏 平台 都 有 非常 经 典 的 游戏 作品 。 对 于 游戏 开发 者 来 说 ， 这 种 游戏 题材 非常 适合 加 入 特效 和 创新 的 玩法 ,但 是 无 论 怎样 改变 ， 该 类 游戏 都 具备 以 下 共同 
的 特点 。 

. 滚动 的 背景 : 玩家 的 主角 一 直 控 制 在 屏幕 范围 内 ， 让 玩家 感觉 到 “在 移动 ”的 方式 就 是 背景 的 上 下 滚动 ， 可 以 使 用 缓冲 背景 并 移动 的 方式 来 达到 滚动 的 效果 。 

CE: 由 玩家 控制 的 对 象 ， 玩 家 在 有 按键 的 平台 上 通过 按键 来 控制 主角 的 移动 ， 在 触摸 平台 上 通过 触摸 来 移动 主角 。 

ЖА: 主角 攻击 的 对 象 ， 通 过 程序 控制 其 移动 ， 可 以 通过 不 同 的 移动 方式 (路径 、 速 度 等 ) 来 提升 玩家 的 感受 ， 也 可 以 通过 敌 机 不 同 的 编队 来 丰富 敌人 的 运行 效果 。 

ORI 子弹 在 纵 版 射击 游戏 中 和 敌人 的 地 位 一 样 重 要 ， 可 以 有 不 同 运行 轨迹 、 杀 伤 效果 等 方式 。 

' 特效 : 包括 爆炸 特效 和 子弹 特效 等 。 


图 17-1 为 经 典 纵 版 游戏 《1943》 的 截图 。 


图 17-1 《1943》 游 戏 截图 


17.2 ” 哨 星 战争 简介 


赠 星 战 争 在 传统 纵 版 设计 游戏 的 基础 上 进行 了 创新 。 


Т.л ЗНАЛ 


该 游戏 的 主角 是 一 只 小 猫 ， 如 图 17-2 所 示 。 敌 人 是 狗 博 士 ， 如 图 17-3 所 示 。 


根据 主角 和 敌人 的 这 种 变化 ， 子 弹 也 做 了 相应 的 变化 ， 小 猫 使 用 的 “子弹 ”是 鱼 骨 ， 


狗 博 士 使 用 的 “子弹 ”是 有 试剂 的 试管 。 


如 图 17-4 和 图 17-5 所 示 。 


图 17-3” 狗 博士 示意 图 


图 17-4 小 猫 的 鱼 骨 子弹 


图 17-5“” 狗 博士 的 试管 子弹 


嘲 星 战争 的 游戏 规则 是 : 用 手指 控制 主角 小 猫 的 移动 ， 当 小 猫 处 于 被 控制 状态 时 ， 会 放出 子弹 ， 狗 博士 不 断 地 从 屏幕 上 部 出 现 ， 玩 家 要 做 的 就 是 移动 小 猫 主角 打 中 狗 博士 ， 打 中 狗 博士 可 以 增加 积分 。 


该 游戏 采用 移动 游戏 中 流行 生存 模式 ， 即 没有 关卡 的 限制 ， 主 角 有 三 次 失败 ( 撞 上 狗 博 士 或 试管 子弹 ) 的 机 会 ， 第 三 次 撞 上 狗 博士 或 试管 子弹 游戏 结束 。 


2. 噶 星 战争 游戏 框架 和 界面 


噶 星 战争 界面 和 流程 较 简单 ， 包 括 主 菜 单 、 天 于 、 游 戏 过 程 等 界面 。 


主 菜单 包括 游戏 开始 (New Game) 等 按钮 ， 也 包括 声音 控制 等 功能 ， 为 了 增加 界面 的 生动 性 ， 所 有 按钮 开始 都 是 从 屏幕 外 移动 进来 的 。 主 菜单 界面 如 图 17-6 所 示 。 


XT (About) 界面 用 来 展示 游戏 信息 ， 如 图 17-7 所 示 。 
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主 游戏 界面 是 游戏 的 主要 功能 界面 ， 包 括 游戏 的 主 逻 辑 (主角 和 敌人 的 移动 、 碰 撞 检测 、 分 数 和 主角 血 量 的 表示 ) 等 ， 如 图 17-8 所 示 。 


游戏 失败 后 ， 在 主 游戏 界面 的 基础 上 调 出 游戏 结束 (GAME OVER) 界面 ， 这 个 模块 在 具体 实现 时 合并 到 主 游戏 模块 中 ， 如 图 17-9 所 示 。 
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图 17-9 ”游戏 结束 界面 


17.3” 主 游戏 模块 组 成 元 素 的 实现 
Cocos2D-X 提 供 了 一 套 完整 的 从 场景 到 布景 层 再 到 节点 的 体系 ， 无 论 是 游戏 界面 还 是 游戏 内 部 ， 都 可 以 使 用 这 套 体系 来 实现 ， 比 如 以 场景 为 基础 容器 ， 在 场景 中 放置 布景 层 ， 布 景 层 中 加 入 按钮 和 精灵 
等 项 目 ， 这 就 构成 了 基础 的 Ul 界 面 ; 布景 层 中 加 入 游戏 背景 、 主 角 和 敌人 等 项 目 ， 就 构成 了 基础 的 游戏 界面 。 


主 游戏 模块 有 基础 U1 (包括 血 量 、 分 数 等 ) 、 敌 人 、 主 角 、 子 弹 等 ， 其 作为 一 个 “容器 ”将 这 些 项 目 放 在 里 面 ， 这 就 好 比 就 饪 一 道 菜 肴 ， 将 基本 的 “ 主 料 ” 加 上 “作料 ” 制 成 “菜肴 ” 放 到 “ 碟 
子 ” 里 。 主 游戏 界面 如 图 17-10 所 示 。 


00000 


17-10 主 游 戏 界面 
17.3.1 ”主角 小 猫 的 实现 
本 游戏 没有 把 小 猫 简单 地 处 理 为 一 张 单 帧 的 图 片 ， 而 是 给 小 猫 加 入 动画 。 小 猫 的 主体 部 分 没有 动画 效果 ， 从 节约 资源 的 角度 出 发 将 资源 分 为 了 四 个 部 分 : 主体 、 左 手 、 右 手 和 尾巴 。 其 中 主体 部 分 的 动 


画 由 三 张 图 片 构成 ， 三 张 图 片 的 明暗 度 不 同 ， 连 续 播 放 就 有 了 闪 动 的 效果 ; 小 猫 向 不 同方 向 移动 时 手臂 会 有 “上 扬 ” 的 动作 ， 这 个 效果 通过 图 片 的 垂直 镜像 获得 ; 尾巴 部 分 通过 旋转 动作 让 它 如 同 座 钟 的 钟 
摆 一 样 左右 摆动 。 以 上 拆 分 的 图 素 如 图 17-11 所 示 。 


* 


catBodyl. png catBody2-4. png catBody3. png catHandl.pnz catHand2. png 


图 17-11 主角 小 猫 拆 分 的 图 素 


其 中 catTail.png 是 尾巴 的 图 片 ，catBody1.png、catBody2-4.png 和 catBody3.png 是 主干 部 分 的 图 片 ，catHand1.png 和 catHand2.png 是 左右 手 的 图 片 。 有 了 这 些 基本 的 “材料 ”就 可 以 构建 “ 主 
fa" XA "ER T. 


作为 游戏 “盘子 ”中 的 一 道 “ 材 料 ”， 主 角 类 理所当然 继承 自 节 点 ， 为 了 让 主角 可 以 接收 用 户 的 触摸 信息 ， 让 主角 类 注册 触摸 相关 的 函数 。 另 外 需要 注意 的 是 ， 通 过 左右 手 的 精灵 指针 可 以 在 初始 化 之 
后 ， 分 别 控制 左右 手 对 象 。 因 为 左右 手 在 游戏 的 运行 过 程 中 需要 改变 ， 所 以 将 它们 的 指针 设置 为 全 局 变量 ， 方 便 之 后 的 控制 。 此 外 ， 还 有 一 种 办 法 ， 就 是 在 调用 addChild 的 时 候 传 入 标签 参数 ， 在 需要 的 时 
候 调 用 getChildByTag 根 据 对 象 标签 获得 对 象 。 这 两 种 方法 适用 于 不 同 的 场合 ， 当 这 个 对 象 需要 经 常 使 用 的 时 候 ， 设 置 为 全 局 变量 的 方法 更 好 ; 如 果 只 是 偶尔 使 用 ， 选 择 后 一 种 方法 更 方便 管理 。 


主角 小 猫 的 初始 化 函数 onEnter 见 代码 清单 17-1。 


代码 清单 17-1 主角 小 猫 的 初始 化 函数 onEnter 


onEnter:function () { 
this. super(); 
this.setContentSize (cc.size(85,90)); 


// 


if( 'touches' in sys.capabilities ) 

this.setTouchEnabled (true); 

else if( 'mouse' in sys.capabilities ) 
this.setMouseEnabled (true); 

// 


创建 身体 


var mainsprite = cc.Sprite.create ("catBodyl.png"); 


载 入 动画 


var animation = cc.Animation.create(); 
animation.addSpriteFrameWithFile ("ca 
animation.addSpriteFrameWithFile 
animation.addSpriteFrameWithFil 
animation.addSpriteFrameWithFil 
animation.setDelayPerUnit (0.1); 
animation.setRestoreOriginalFrame (true); 
mainsprite.setPosition (cc.p(0,0)) 


// 


Boda: png"); 
Body2-4.png"); 
Body3.png"); 
Body2-4.png"); 


toL Er e 


mainsprite.runAction( 
cc.RepeatForever.create (cc.Animate.create (animation))); 
this.addChild (mainsprite); 


// 
创建 主角 的 “尾巴 ” 

var tail = cc.Sprite.create("catTail.png"); 
tail.setAnchorPoint (cc.p(0.5,1)); 
tail.setPosition(cc.p(-5,-29)); 
tail.setScale (0.5); 
| x f CE 


edad 
tail.runAction( 

cc.RepeatForever.create (cc.Sequence.create( 
cc.RotateBy.create(0.5,-40), 
cc.RotateBy.create(0.5,40)))); 
this.addChild (tail); 


// 
创建 主角 左手 
lefthand = cc.Sprite.create ("catHandl.png"); 
 lefthand.setAnchorPoint (cc.p (1,0.5)) ; 
 lefthand.setPosition(cc.p(-18,-20)); 
this.addChild( lefthang); 


// 
创建 主角 右手 
 righthand = cc.Sprite.create ("catHang2.png"); 
_righthand. setPosition (cc.p (18, -20)); 
righthand.setAnchorFPoint (cc.p(0,0.5)); 
this.addChild( righthand); 


offset = cc.p(0,0); 
 iscontrol - false; 
this.schedule (this.releasebullet,1.0); 


iy 


这 个 函数 好 比 将 组 装 组 件 的 过 程 ， 首 先是 初始 化 设置 大 小 和 人 允许 触摸 ， 然 后 是 主干 部 分 精灵 的 创建 和 初始 化 ， 并 且 新 建 主干 部 分 的 动画 ， 后 面 顺序 创建 尾巴 、 左 手 和 右手 部 分 


尾巴 部 分 首先 设置 初始 的 角度 为 20 度 ， 然 后 定义 旋转 动作 ， 该 旋转 动作 首先 旋转 -40 度 ， 然 后 旋转 40 度 ， 这 样 就 可 以 实现 钟 摆 的 效果 ， 尾 巴 的 运动 如 图 17-12 所 示 。 


图 17-12 尾巴 左右 摆动 的 效果 


初始 化 之 后 ， 主 角 的 移动 和 变化 主要 是 通过 捕获 触摸 点 坐标 的 变化 ， 触 摸 的 逻辑 处 理 函 数 主要 集中 在 ccTouchBegan、ccTouchMoved 和 ccTouchEnded 这 三 个 函数 上 。 首 先 在 ccTouchBegan 函 数 中 
计算 出 触摸 点 相对 于 主角 位 置 的 偏 移 ， 开 始 触摸 函数 的 实现 见 代码 清单 17-2。 


ccTouchBegan: function (touch, event) { 
/ if(this.getParent ().isover) 
// return false; 
var touchPoint = this.convertToNodeSpace (touch.getLocation()); 


if(! this.containsTouchLocation (LouchPoint) ) { 
return false; 


}else{ 
~ _iscontro] = true; 


触摸 起 始 EE 点 的 偏 移 


_offset.x = touch.getLocation(). 


х 
=. fset.y = touch.getLocation().y 


- this.getPosition().x 
- this.getPosition().y; 


首先 判断 主角 是 否 死亡 ， 如 果 和 死亡 返回 false。 然 后 通 


过 containsTouchLocation 函 数 判断 触摸 点 是 否 在 主角 的 矩形 框 中 ， 如 果 不 在 这 个 矩 形 范 
标 和 主角 锚 点 坐标 之 间 的 差 ， 


已 围 则 返回 false; 如 果 在 矩形 学 围 内 ， 则 获得 触摸 点 位 置 坐 
这 个 偏 移 位 置 和 触摸 点 移动 过 后 的 坐标 点 就 可 以 计算 出 主角 的 新 位 置 ， 


这 个 过 程 在 触摸 点 移动 函数 ccTouchMoved 中 处 理 。 
ccTouchMoved 函 数 见 代码 清单 17-3。 


代码 清单 17-3 ”触摸 点 移动 国 数 CcCTouchMoved 


ccTouchMoved: function (touch, event) { 
if(this. iscontrol)[í 
var touchPoint - 


touch.getLocation(); 
var x = touchPoint.x - offset.x; 
joa y = touchPoint.y - offset.y; 
MEER Ели 


f(x < this.getPosition().x)( 
 lefthand.setFlippeqY (true); 
 righthand.setFlippedY (false); 
Jelse( 
 lefthand.setFlippeqY (false) 
 righthand.setFlippegY (true) 


} 
this.setPosition (х,у); 


) 


}, 


首先 通过 偏 移 位 置 坐标 和 触摸 点 移动 过 后 的 点 的 坐标 计算 出 主角 现在 的 坐标 点 ， 然 后 就 是 显示 部 4 


分 的 处 理 ， 如 果 下 一 个 坐标 点 的 横 坐 标 大 于 目前 坐标 的 横 坐 标 ， 说 明 主角 相对 于 目前 的 位 置 向 右 移动 ， 
则 右手 抬 起 ， 反 之 左手 抬 起 。 这 个 抬 起 动作 只 需要 将 图 片 做 一 个 y 轴 翻转 ， 也 就 是 y 轴 镜像 ， 右 移 效果 如 图 17-13 所 示 。 


触摸 结束 时 ， 也 就 是 手指 离开 屏幕 时 ， 需 要 将 主角 的 两 手 放 下 ， 并 且 将 是 否 控制 主角 变量 置 位 false，ccTouchEnded 函 数 的 代码 见 代 码 清单 17-4。 


图 17-13 主角 小 猫 右 移 效 果 


ccTouchEnded: function (touch, event) { 
if (this. iscontrol)í 
this. iscontrol = false; 


// 
双手 放置 的 位 置 重 置 
_lefthand.setrlippedY (false); 
_righthand.setrlippedY (false); 
} 
}, 


主角 的 创建 和 逻辑 基本 完成 。 


政 人 狗 博 士 的 逻辑 和 主角 小 猫 类 似 ， 只 是 不 需要 拆 分 成 很 多 部 分 。 由 于 动画 只 是 单 帧 的 动画 ， 敌 人 的 图 片 资 源 如 图 17-14 所 示 。 


Irliozil.pnz Ilrliazz.pntz 
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相 比 于 DrDog1.png，DrDog2.png 下 部 有 裙 皱 的 表现 ， 这 两 张 图 片 连续 播放 时 ， 就 会 有 动态 的 效果 。 另 外 狗 博士 死亡 时 会 有 爆炸 效果 ， 也 是 一 个 动画 ， 资 源 如 图 17-15 所 示 ， 连 续 播 放 这 五 张 图 片 就 会 
有 爆炸 的 效果 。 


booml.pnz boomz.pngz boom3. png 
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boom5. png 


boomt. png 


图 17-15 ”爆炸 图 片 资 源 


政 人 狗 博士 的 GameObjEnemy 类 继承 自 Node 节 点 ， 初 始 化 函数 onEnter 见 代码 清单 17-5。 


代码 清单 17-5 敌人 狗 博士 的 初始 化 函数 onEnter 


onEnter:function(){ 
this. super(); 
this.setContentSize (cc.size(99,111)); 


// 
创建 狗 博 士 身 体 
mainbody = cc.Sprite.create ("DrDogl.png"); 
// 


创建 动画 
var animation = cc.Animation.create(); 
animation.addSpriteFrameWithFile ("DrDogl.png"); 
animation.addSpriteFrameWithFile ("DrDog2.png"); 


animation.se 
animation.se 


// 


tDelayPerUnit (0.1); 


tRestoreOriginalFrame (true); 


mainbody.runAction( 


cc.RepeatForever.create (cc.Animate.create (animation))); 


this.addChild (mainbody); 


// 
爆炸 特效 
boom = cc.Sprite.create ("booml.png"); 
this.addChild (boom); 
boom.setVisible (false); 
this.schedule (this.releasebullet, 1.2); 


} 


, 


首先 创建 狗 博士 精灵 对 象 ， 然 后 定义 动画 Animation， 主 体 部 分 运行 动画 。 


下 面 定义 爆炸 精灵 对 象 ， 在 狗 博士 处 于 正常 状态 时 ， 将 爆炸 精灵 设置 为 不 可 见 ; 


容 。setDie 函 数 如 代码 清单 17-6 所 示 。 


代码 清单 17-6 


setdie:function()í 


// 
隐藏 身体 


mainbody.setVisible (1 


__ / 
显示 爆炸 


this.islife = 


false; 


boom. setVisible (true); 
this.stopAllActions (); 


// 
爆炸 动画 


var boom 
boomAnim 
boomAnim 
boomAnim 


boomAnim 
boomAnim 


Animation = cc.Anim 
tion.addSpriteFrameWithFi 


i EUIS PU ERE SetDie 


False); 


ation.create(); 


e ("booml.png" 


tion.addSpriteFrameWithFil 
tion.addSpriteFrameWithFil 


e ("boom2.png" 


tion.addSpriteFrameWithFil 


); 

( ); 
e ("boom3.png"); 
е ("boom4.png") ; 
e ("boom5.png"); 


n 
а 
a 
boomAnimation.addSpriteFrameWithFi]l 
S 
" 


tion.setDelayPerUnit (0. 


1); 


boomAnimation.setRestoreOriginalFrame (true); 


boom 


.runAction (cc.Seqi 


cc.Animate.create (boomAnimation) 


cc.CallFunc.crea 


在 爆炸 运行 完 动画 之 后 ， 会 调用 重新 开始 函数 restart， 该 函数 重新 设置 位 置 ， 将 主干 部 分 设置 为 可 见 ，| 
数 见 代 码 清单 17-7。 


代码 清单 17-7 


movestart: 


te(this.restart, 


uence.create( 


, 


this))); 


геѕїагір4тоуеѕіагір 


function () { 
this.isli 


fe — true; 


var mtype = type 


// 


贝 塞 尔 曲线 移动 


var controlPointsl = [cc.p (t 


var bezier] 
var controlPoints2 - 


By2 = сс. 


сс.р( 
сс.р (і 


this.getPosition().x - 400,330) 


this.getPosi 


tion().x + 400,280) 


this.getPosi 
BezierTo.crea 


var bezier] 


Byl = cc. 


Cc. 
сс. 


цеце) 


[cc.p (1 
(this.getPosi 
(this.getPosi 
BezierTo.crea 


tion().x,-70)] 


tion() .x - 400,280) 


1I 


(mtype == 


this.runAction 
cc.MoveBy.crea 


1 ){ 


tion().x,-70)] 


cc.CallFunc.create (this.res 


lse if (mtype == 2) 


this.runAction (cc 


{ 


(cc.Sequence.create( 
се (6, сс.р(0,-600)), 


cart,this))); 


cc.CallFunc.create (this.res 


lse if (mtype == 3) 


{ 


.Sequence.create (bezierByl, 


cart,this))); 


this.runAction (cc.Sequence.create (bezierBy2, 


cc.CallFunc.create( 


t: function (){ 


boom.se 


this.se 


tVisible (í 
var size = cc.Director.get 
tcPosition(cc.p(size 


}, 


boom.se 


this.islife = true; 
mainbody.setVisible (true); 
tVisible(1 
this.movestart (); 


False); 


False); 


this.res 


type = Math.floor (Math.random() 


true); 


cart,this))); 


х 2) +1; 


Instance ().getWinSize(); 


te(6, controlPoints1); 
this.getPosition().x + 400,330) 


te(6, controlPoints2); 


.width/4 * type,size.height 


, 


, 


00)); 


S8 


在 狗 博士 处 于 死亡 状态 时 ， 


爆 


主体 部 分 设置 为 不 可 见 ， 爆 炸 部 分 设置 为 可 见 并 运行 爆炸 动画 ， 在 setDie 函 数 中 处 理 这 些 内 


炸 


部 分 设 


置 为 不 可 见 ， 


然后 调用 movestart 函 数 设置 移动 的 方式 。restart 国 数 和 movestart 国 


movestart 设 置 了 三 种 移动 方式 ， 包 括 两 种 曲线 移动 方式 和 一 种 直线 运动 方式 ， 三 个 狗 博 士 随机 选择 移动 方式 就 会 产生 不 同 的 组 队 效 果 。 如 图 17-16 所 示 ， 最 右 侧 的 狗 博 士 首 先 曲 线 移动 到 接近 屏幕 边缘 


的 地 方 ， 然 后 曲线 移动 回 原来 的 位 置 。 


SCORE 00000 SCORE 00000 
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17.3.8 ВЕ 


小 猫 和 狗 博 士 各 自 有 子弹 ， 这 是 它们 互相 攻击 的 主要 方式 ， 其 中 小 猫 的 子弹 是 一 个 鱼 骨 ， 资 源 图 片 如 图 17-17 所 示 。 


鱼 骨 子弹 类 GameHeroBullet 的 定义 见 代码 清单 17-8。 


p 
at 


E 


图 17-17 和 鱼 骨 子弹 


代码 清单 17-8 鱼 骨 子弹 类 GameHeroBullet 的 定义 


var GameHeroBullet = cc.Layer.extend(í 


isable:false, 


ameHeroBullet:function()í 
isvisable - false 
Sys.dumpRoot () ; 
sys.garbageCollect (); 


进入 场景 时 调用 

nter:function()Íí 

this. super(); 

this.setContentSize (cc.size(21,52)); 

var mainsprite = cc.Sprite.create ("YuGuZD.png"); 
this.addChild (mainsprite); 


xit:function()í( 
this. super() 


设置 为 不 显示 
setlIsNotVisable:function()í 

this.setVisible(false) 

this.isvisable = false 


// 


this.stopAllActions () 


getIsvisble:function()( 
return this.isvisable 


br 
7 
设置 为 显示 


setlIsVisable:function()í 

this.setVisible (true); 

this.isvisable = true; 

this.runAction (cc.Sequence.create( 
cc.MoveTo.create((-this.getPosition().y + 
550) /150,cc.p(this.getPosition().x,550)), 
cc.CallFunc.create(this.setIsNotVisable,this))); 


} 
| 


鱼 骨 子弹 类 也 是 先 继承 自 Node 节 点 类 ， 因 为 在 屏幕 中 的 所 有 子弹 由 一 个 数组 来 管理 ， 所 以 需要 一 个 变量 isvisable 来 记录 这 个 子弹 对 象 是 否 被 使 用 ， 如 果子 弹 正 在 使 用 中 则 设置 为 true， 否 则 置 为 false。 


17.3.44. 试管 子弹 的 实现 


狗 博 士 的 试管 子弹 和 鱼 骨 子 弹 类 似 ， 不 同 的 是 试管 子弹 加 入 一 个 360 度 的 旋转 动作 ， 试 管子 弹 如 图 17-18 所 示 。 


图 17-18 ”试管 子弹 


试管 子弹 的 初始 化 函数 onEnter 见 代码 清单 17-9。 


代码 清单 17-9 ”试管 子弹 的 初始 化 函数 onEnter 


onEnter: function () { 
this. super (); 
this.setContentSize(cc.size(21,52)); 
var mainsprite = cc.Sprite.create ("DrDogZD.png"); 
/ / 
运行 旋转 动画 
mainsprite.runAction (cc.RepeatForever.create( 
cc.RotateBy.create(1,360))); 
this.addChild (mainsprite); 


}, 


试管 子弹 的 旋转 效果 如 图 17-19 所 示 。 


17.3.5 ”游戏 分 数 的 实现 


另外 一 个 可 以 抽象 出 来 的 主 游戏 中 的 元 素 就 是 游戏 分 数 GameMark 类 ， 游 戏 分 数 在 游戏 界面 的 右上 角 显 示 ， 如 图 17-20 所 示 。 


17-19 ”试管 子弹 旋转 效果 


图 17-20 ”游戏 分 数 


分 数 的 初始 化 函数 onEnter 见 代码 清单 17-10 所 示 。 


代码 清单 17-10 ”分数 的 初始 化 函数 onEnter 


onEnter: function () { 

this. super (); 

director = cc.Director.getInstance (); 
winSize = director.getWinSize(); 
this.setContentSize (winSize); 


// 


var title = cc.Sprite.create ("score.png"); 
title.setPosition(cc.p(winSize.width/2 + 40, 
winSize.height - 15)); 

title.setScale (0.5); 

this.addChild (title); 

var array = [] 


// 
将 数字 精灵 存 数 数组 
for (var i = 0;i < 5;i ++){ 
var shu = cc.Sprite.create ("shu.png") ; 
ui = shu.getTexture () 
shu.setScale(0.5); 
shu.setTextureRect (cc.rect (234,0,26,31 


— 


); 


shu.setPosition(cc.p(winSize.width - 15 - i * 15, 
winSize.height - 15)); 
array[i] = shu 


this.addChild(shu,10 + i,10 + i) 


) 


this. arr = array 


} 


首先 创建 标题 精灵 对 象 ， 由 于 这 个 标题 对 象 不 会 在 游戏 运行 中 变化 ， 只 需要 创建 后 加 入 GameMark 类 中 即 可 ; 然后 在 for 循 环 中 分 别 创建 这 五 位 的 精灵 对 象 ， 把 它们 都 放 到 bits 数 组 中 ， 可 以 在 分 数 变化 
时 设置 数字 图 片 的 变化 ， 设 置 数字 图 片 的 函数 见 代码 清单 17-11。 


代码 清单 17-11 “设置 数字 图 片 addnumber 函 数 


addnumber: function (num) { 
this.mark += num; 
var mark - this.mark 


// 
获得 每 一 位 需要 显示 的 数字 
var temp = mark % 10; 
var node = this. arr[0] 
f (temp > 0) { 


H- 


设置 图 片 


node.setTexture (ui); 


// 
设置 裁剪 位 置 


node.setTextureRect (cc.rect((temp - 1) * 26,0,26,31)); 
Jelse( 
node.setTexture (ui); 
node.setTextureRect (cc.rect (234,0,26,31)); 


} 
node = this. arr[1] 
temp = Math.floor((mark % 100) / 10); 
f (temp > O)( 
node.setTexture (ui); 
node.setTextureRect (cc.rect((temp - 1) * 26,0,26,31)); 
Jelse( 
node.setTexture (ui); 
node.setTextureRect (cc.rect (234,0,26,31)); 


H- 


} 
node = this. arr[2] 
temp = Math.floor((mark $ 1000) / 100); 
if (temp > O)( 
node.setTexture (ui); 
node.setTextureRect (cc.rect((temp - 1) * 26,0,26,31)); 
Jelse( 
node.setTexture (ui); 
node.setTextureRect (cc.rect (234,0,26,31)); 


} 
node = this. arr[3] 
temp = Math.floor((mark $ 10000) / 1000); 
f(temp » O)( 
node.setTexture (ui); 
node.setTextureRect (cc.rect((temp - 1) * 26,0,26,31)); 
Jelse( 
node.setTexture (ui); 
node.setTextureRect (cc.rect (234,0,26,31)); 


H- 


} 

node = this. arr[4] 

temp = Math.floor (mark / 10000); 

f (temp > 0){ 
node.setTexture (ui); 
node.setTextureRect (cc.rect((temp - 1) * 26,0,26,31)); 

}else{ 
node.setTexture (ui); 
node.setTextureRect (cc.rect (234,0,26,31)); 


H- 


mark 记 录 玩 家 的 得 分 ， 通 过 除法 和 取 余 运算 依次 获得 每 位 数字 ， 然 后 通过 setTextureRect 设 置 每 一 位 的 贴图 范围 ， 数 字 图 片 资源 如 图 17-21 所 示 。 


由 于 图 片 资源 在 一 整 张 图 中 ， 需 要 裁 航 矩 形 获 取 相 应 的 数字 ， 这 有 一 个 要 求 ， 每 个 数字 位 数 的 宽度 和 高 度 必 须 是 一 致 的 ， 这 样 就 可 以 通过 需要 的 数字 位 数 乘 以 单 张 图 片 的 宽度 获得 单 张 数字 的 起 始 位 置 
的 横 坐 标 ， 再 通过 裁剪 单个 数字 的 宽度 获得 单个 的 数字 显示 ， 游 戏 中 的 分 数 变 化 如 图 17-22 所 示 。 


图 17-21 ”数字 图 片 资源 


图 17-22 ”游戏 中 的 分 数 变化 


17.4 HÆRRI, 

КЕЛДЩ E sk BE SEUISERUSCHL. 
17.4.4. 游戏 主 模块 的 实现 

有 了 “材料 ”， 就 可 以 制作 游戏 “菜肴 ”了 ， 本 节 使 用 GameMain 主 游戏 场景 ， 将 之 前 这 些 材料 进行 整合 。 首先 在 初始 化 函数 中 创建 并 加 入 这 些 “ 材 料 ”， 创 建 的 具体 方法 见 代码 清单 17-12。 
代码 清单 17-12 ”初始 化 函数 


var layer = new MainLayer(); 


创建 背景 

bgl = cc.Sprite.create ("bg.png"); 
bgl.setScale(0.5); 
bg2 = cc.Sprite.create ("bg.png"); 
bg2.setScale(0.5); 
bgi.setAnchorPoint (cc.p(0,0)) 
bg2.setAnchorPoint (cc.p (0,0)) 
bgl.setPosition(cc.p(0,0)); 
bg2.setPosition(cc.p(0,winSize.height)); 

layer.addChild (bg1,0); 

layer.addChild (bg2,0); 

layer.scheduleUpdate (); 


hero = new GameObjHero(); 

hero.setScale (0.5); 
hero.setPosition(cc.p(winSize.width / 2,100)); 
layer.addChild (hero,2,1); 


gamemark = new GameMark () ; 
layer.addChild (gamemark, 4); 


B 


// 
量 的 


blood = 3; 

[] 

cc.SpriteBatchNode.create ("cat.png"); 
cc.Sprite.create (ui.getTexture ()); 
oodl.setPosition(cc.p(20,winSize.height - 20)); 
oodl.setScale (0.2); 

i.addChild (blood); 

loods[0] = blood] 
lood2 = cc.Sprite.create (ui.getTexture()); 
lood2.setPosition(cc.p(50,winSize.height - 20)); 
lood2.setScale(0.2); 

i.addChild (р1ооа2); 

oods[1] = р1ооа2 

lood3 = cc.Sprite.create (ui.getTexture()); 
lood3.setPosition(cc.p(80,winSize.height - 20)); 
lood3.setScale (0.2); 

i.addChild (р1ооаз); 

loods[2] = blooa3 

layer.addChild (ui,4); 

enemys = [] 


Ф 

H 

G 

H- 
How || 


еее Мел омео sd 


创建 敌人 


for (var i = 0;i < 1;i ++){ 

var enemy = new GameObjEnemy(); 

var type = i + 1 

enemy.setPosition(cc.p(winSize.width/4 * type,winSize.height 
+ 50)); 
enemy.setScale (0.5); 
enemy.setType (type) 
enemys[i] = enemy; 
layer.addChild (enemy, 1); 
enemy.movestart (); 


} 
bullets = [] 


// 


创建 子弹 


CE 人 0) 

var mybullet = new GameHeroBullet () 
mybullet.setIsNotVisable(); 
mybullet.setScale(0.5); 

bullets[i] = mybullet 
layer.addChild (mybullet, 3); 


єтєт 


) 


enemybullets - [] 


// 
创建 敌人 子弹 


for(var і = 0;i < 5;i ++){ 

var mybullet = new GameEnemyBullet () 
mybullet.setIsNotVisable(); 
mybullet.setScale(0.5); 
enemybullets[i] = mybullet 
layer.addChild (mybullet, 3); 


} 


// 
创建 游戏 结束 界面 


gameover = cc.Sprite.create ("gameover.png"); 

gameover.setAnchorPoint (cc.p(0.5,0.5)); 

gameover.setPosition(cc.p(0,0)); 

gameover.setPosition(cc.p(winSize.width/2,winSize.height/2 + 

70)); 

gameover.setVisible (false); 

gameover.setScale (0.5); 

layer.addChild (gameover, 5); 

var pCloseltem = cc.Menultemimage.create ("back.png","back.png", 
self.callbacks.menuBackCallback,self.callbacks); 

pCloseltem.setPosition( cc.p(winSize.width/2,winSize.height/2 


50) ); 
pCloseItem.setScale (0.5); 

var pMenu = cc.Menu.create (pCloseItem); 
pMenu.setPosition(cc.p(0,0)); 
layer.addChild (pMenu, 5,25); 
pMenu.setVisible (false); 
pMenu.setEnabled (false); 
return layer; 


这 里 需要 注意 ， 


除了 之 前 介绍 的 几 个 “材料 ”之 外 ， 在 屏幕 的 左上 角 加 入 了 记录 主角 “ 血 量 ” 的 精灵 图 片 ， 每 只 小 猫 代表 一 次 失败 的 机 会 ， 三 次 机 会 都 用 完 以 后 游戏 失败 。 小 猫 “ 血 量 ” 如 图 17-23 所 


图 17-23 


游戏 中 的 血 量 记录 


游戏 中 一 般 需 要 在 游戏 循环 的 每 帧 中 控制 渲染 和 逻辑 ， 在 Cocos2D-X 引 警 中 已 经 不 需要 再 控制 泻 染 ， 


重 写 update 函 数 便 可 以 在 游戏 循环 中 控制 逻辑 。 


可 以 根据 游戏 的 需要 加 入 每 帧 更 新 的 逻辑 函数 ， 在 初始 化 函数 中 调用 scheduleUpdate 函 数 ， 然 后 


本 游戏 中 需要 在 更 新 函数 中 做 以 下 几 件 事 。 


` 游戏 背景 的 移动 。 


. 主角 和 敌人 的 碰撞 检测 。 


主角 和 敌人 子弹 的 碰撞 检测 。 


` 主角 子弹 和 敌人 的 碰撞 检测 。 


update 函数 如 代码 清单 17-13 所 示 。 


代码 清单 17-13 update 函数 


update:function() { 


// 


设置 背景 位 置 
bgl.setPosition(cc.p(bgl.getPosition().x, 


bg] 


L.getPosition().y - 2)); 


bg2.setPosition(cc.p(bg2.getPosition().x, 
bg2.getPosition().y - 2)); 


H- 


кә 


} 


f(bg2.getPosition().y < 0){ 


var temp = bg2.getPosition().y + 480; 
bg1.setPosition (cc.p(bg2.getPosition ().x,temp)); 


f(bgl.getPosition().y < 0){ 


var temp = bgl.getPosition().y + 480; 
bg2.setPosition(cc.p(bgl.getPosition().x,temp)); 


var hpos - hero.getPosition(); 


// 
敌人 和 子弹 碰撞 检测 


} 


// 
主角 和 敌人 子弹 碰撞 


if(!this.isreduce)t{ 


enemy = enemys 


[i]; 


for(var i = 0;i < 1;i ++) { 


var epos = enemy.getPosition(); 


H- 


L- 


if(enemy.islife)(í 
for (var j = 0; < 5;j ++){ 

f (bullets[j].getisvisble ()) { 
f(this.isCollion 


(bullets[j].getPosition(),epos,5,13,21,28))( 
enemy.setdie(); 
gamemark.addnumber (200) ; 


break; 


2А 


) 


if(this.isCol] 


ion 


(hpos, enemybu] 


llets[ 


背景 移动 效果 如 图 17-24 所 示 。 


i 
( 


if(this.isreduce && enemy.islife && 

this.isCollion (hpos,epos,21,22.5,21,28))( 
enemy.setdie(); 
this.setherohurt (); 


for(var i = 0;i < 5;i ++){ 


].getPosition(),21,22.5,5,13))( 


this.setherohurt (); 
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图 17-24 ”背景 移动 效果 


Р 
aj 


可 以 从 这 两 张 图 的 对 比 中， 看 出 背景 的 云彩 在 移动 。 
当 小 猫 和 狗 博 士 或 者 试管 子弹 碰撞 时 ， 左 上 角 的 主角 "fnm" 减少 一 个 ， 并 且 为 小 猫 受 伤 设置 了 闪烁 动画 ， 如 图 17-25 所 示 。 


图 17-25 中 没有 显示 主角 小 猫 ， 因 为 小 猫 正 处 于 闪 炼 状态 ， 截 图 这 一 帧 是 不 显示 主角 的 那 一 帧 。 当 血 量 减 为 0 时 ,游戏 失败 ， 游 戏 结束 界面 如 图 17-26 所 示 。 
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SCORE 03 600 


BACK TO MENU 
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图 17-26 ”游戏 结束 界面 


设置 受伤 并 检测 是 否 游戏 失败 的 逻辑 见 代 码 清单 17-14。 


代码 清单 17-14 ”主角 受伤 逻辑 


setherohurt: function () { 


FM 
主角 受伤 ， 减 
hero.stopAllActions (); 


// 
游戏 结 
if (blood == 0) { 
f(! this.isover)( 
this.isover = true; 
this.setover(); 


ы 


n 
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}else{ 
bloods[3 - blood] .setVisible (false); 
blood ==; 


var action = cc.Blink.create(5, 10); 
hero.runAction (action); 
this.scheduleOnce (this.resetreduce, 5.0); 
this.isreduce = true; 


}, 


17.4.2 ”游戏 主 菜单 的 实现 
游戏 的 界面 制作 相对 于 主 游戏 的 制作 来 说 要 简单 ， 只 需 把 界面 控件 加 入 布景 层 中 ， 然 后 设置 按钮 的 回调 函数 就 可 以 了 ， 初 始 化 函数 见 代 码 清单 17-15。 
代码 清单 17-15 ”初始 化 函数 


var layer = new MainLayer(); 
var bg = cc.Sprite.create ("bg.png"); 
bg.setScale (0.5); 
bg.setPosition(cc.p(winSize.width / 2, winSize.height / 2)); 
layer.addChild (bg,0,0); 


// 
创建 \ 月 亮 “ 
var bgstar = cc.Sprite.create ("moon.png"); 
bgstar.setScale (0.5); 
bgstar.setAnchorPoint (cc.p(0.5,0)); 
bgstar.setPosition (cc.p(winSize.width/3 * 2, 0)); 
layer.addChild (bgstar,1,1); 


© H 

标题 
var title = cc.Node.create(); 
title.setContentSize(cc.size(winSize.width - 40,50)); 
/ / 

标题 文字 


var ptmLabel = cc.Sprite.create ("meowstar.png"); 
ptumLabel.setScale (0.5); 
pumLabel.setPosition(cc.p(0,30)); 

title.addChild (ptmLabel); 


// 
战斗 标题 
var ptbLabel = cc.Sprite.create ("battle.png"); 
ptbLabel.setScale (0.5); 
ptbLabel.setPosition(cc.p(0,-30) ); 
citle.addChild (ptbLabel); 
title.setPosition(cc.p(winSize.width / 2, 
winSize.height - 80)); 
layer.addChild (title,2,2); 
// 


按钮 
var newGameltem = cc.MenuIltemImage.create ("newgameA.png", 
"newgameB.png", 
self.callbacks.menuNewGameCallback,self.callbacks); 
newGameltem.setScale (0.5); 
newGameItem.setPosition(cc.p(winSize.width / 2, 
winSize.height / 2 - 20)); 


// 
继续 按钮 

var continueItem = cc.MenultemImage.create ("continueA.png", 
"continueB.png",self.callbacks.menuContinueCallback, 
self.callbacks); 

continueIltem.setScale (0.5); 

continueltem.setPosition(cc.p(winSize.width / 2, 
winSize.height / 2 - 80)); 


// 
关于 按钮 

var aboutItenm = cc.MenultemImage.create ("aboutA.png", 
"aboutB.png",self.callbacks.menuAboutCallback, 
self.callbacks); 

aboutltem.setScale (0.5); 

aboutltem.setPosition(cc.p(winSize.width / 2, 
winSize.height / 2 - 140)); 


soundlItem = cc.MenuIltemImage.create ("sound-on-A.png", 

sound-on-B.png",self.callbacks.menuSounaCallback, 
self.callbacks); 

soundItem.setScale (0.5); 

soundItem. setPosition (сс.р (40,40)); 


var mainmenu = cc.Menu.create (newGameItem, continueItem, 
aboutItem,soundItem); 
mainmenu.setPosition(cc.p(0,0)); 
mainmenu.setEnabled(false); 
layer.addChild (mainmenu,1,3); 
mainmenu.runAction (cc.Sequence.create( 
cc.FadeIn.create(0.5), 
cc.CallFunc.create( 
self.callbacks.menuEnter,self.callbacks))); 
m layer = layer; 


// 

播放 声音 
cc.audioEngine.playMusic ("res/background.mp3",true) 
return m layer; 
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为 菜单 加 入 动画 的 方法 见 代 码 清单 17-16。 


代码 清单 17-16 ”进入 菜单 函数 


onEnter:function () { 

this. super(); 

var mainmenu = m layer.getChildByTag (3); 

mainmenu.setOpacity (0) 

mainmenu.runAction (cc.Sequence.create( 
cc.FadeIn.create(0.5), 
cc.CallFunc.create (self.callbacks.menuEnter, 

self.callbacks))); 


// 
标题 动画 
var title = m layer.getChildByTag (2); 
title.setPositionY (winSize.height + 20); 
title.runAction (cc.EaseElasticIn.create( 
cc.MoveBy.create(0.5,cc.p(0,-100)))); 


СА 

背景 动画 
var bgstar = m layer.getChildByTag (1); 
bgstar.setPositionX(winSize.width/3 * 2); 
bgstar.runAction (cc.MoveBy.create( 
0.5,cc.p(winSize.width/3,0))); 


1743 ”天 于 界面 实现 


关于 界面 包括 关于 框 和 关于 文字 等 ， 主 要 是 使 用 主 菜单 的 背景 ， 


具体 的 初始 化 函数 见 代 码 清单 17-17。 


代码 清单 17-17 初始 化 函数 


图 17-27 ”按键 从 屏幕 外 移动 到 主 菜单 界面 


将 星球 移动 到 另 一 面 ， 另 外 在 背景 上 添加 文字 边框 和 文字 内 容 。 与 主 菜单 类 似 ， 也 要 在 onEnter 浮 数 中 添加 进入 菜单 时 的 一 系列 动画 。 


self.getPlayScene = function() { 
director = cc.Director.getInstance|(); 
winSize = director.getWinSize(); 


r 


~ 一 


centerPos = cc.p( winSize.width/2, winSize.height/2 ) 


// 
层 创 建 
Var MainLayer = сс.Іауег.ехіепа ({ 
ctor:function () { 
this. super(); 
this.init(); 
), 
onEnter:function () { 
this. super(); 
菜单 进入 动画 
var mainmenu = m layer.getChildByTag (4); 
mainmenu.setPositionX(-100); 
mainmenu.runAction (cc.Sequence.create( 
cc.EaseElasticIn.create( 
cc.MoveBy.create(0.5,cc.p(100,0))), 
cc.CallFunc.create (self.callbacks.menu 
self.callbacks))); 
// 
标题 动画 
var title = m layer.getChildByTag (3); 


title.setPositionY (winSize.height + 20); 
title.runAction(cc.EaseElasticIn.create( 

cc.MoveBy.create(0.5,cc.p(0,-100)))); 
// 


Enter, 


背景 星球 动画 


var bgstar = m layer.getChildByTag (1); 

bgstar.setPositionX(winSize.width/3 * 2); 

bgstar.runAction (cc.MoveBy.create|( 
0.5,cc.p(winSize.width/3,0))); 

// 


框 子 动画 


var kuang = m layer.getChildByTag (2); 

kuang.setPositionX(-200); 

kuang.runAction (cc.MoveTo.create( 
0.5,cc.p(winSize.width/2,winSize.height/2))); 


) 
J)? 


var layer = new MainLayer(); 


创建 背景 

var bg = cc.Sprite.create ("bg.png"); 

bg.setScale (0.5); 

bg.setPosition(cc.p(winSize.width / 2, winSize.height / 2)); 
layer.addChild (рд, 0,0); 
/ 


/ 
创建 星球 
var bgstar = cc.Sprite.create ("moon.png"); 
bgstar.setScale (0.5); 
bgstar.setAnchorPoint (cc.p(0.5,0)); 
bgstar.setPosition (cc.p(winSize.width/3, 0)); 
layer.addChild (bgstar,1,1); 

// 


创建 边框 
var kuang = cc.Sprite.create ("tb.png"); 
kuang.setScale (0.5); 
kuang.setAnchorPoint (cc.p(0.5,0.5)); 
kuang.setPosition (cc.p(winSize.width/2,winSize.height/2)); 
layer.addChild (kuang,2,2); 
/ 


/ 
关于 标题 
var abouttitle = cc.Sprite.create ("about.png"); 
abouttitle.setScale (0.5); 
abouttitle.setPosition (cc.p(winSize.width/2, 
winSize.height - 20)); 
layer.addChild (abouttitle, 3,3); 


// 
关于 文字 
var inf = "name:meow war\n\nprogram: shuoduan man\n\nart 
design:peng xu\n\ncompany:hz books\n\n 
powered by cocos2D-x" 


/ 
创建 关于 文字 标签 
var myjineng = cc.LabelTTF.create(inf,"Marker Felt", 
40,cc.size(400,400),cc.TEXT ALIGNMENT LEFT); 
myjineng.setAnchorPoint (cc.p(0,1)); B 
myjineng.setColor (cc.color (200,200,200)); 
myjineng.setPosition (сс.р (50, 600)); 
kuang.addChild (myjineng); 


// 
回 按钮 


iR 
var back = cc.MenulItemImage.create ("backA.png", 
"backA.png",self.callbacks.menuBackCallback, 
self.callbacks); 
back.setScale (0.5); 
back.setPosition(cc.p(winSize.width - 20,winSize.height - 20)); 
// 
将 返回 按钮 作为 菜单 项 加 入 菜单 中 


var mainmenu = cc.Menu.create (back); 
mainmenu.setPosition(cc.p(0,0)); 
mainmenu.setEnabled (false); 
layer.addChild (mainmenu, 3, 4); 

m layer - layer; 

return m layer; 


}; 


其 中 文字 部 分 采用 系统 文字 ， 使 用 LabelTTF 类 ,， 创建 时 定义 一 个 语句 块 ， 在 这 个 区 域内 文字 采用 “TEXT_ALIGNMENT _LEFT” 左 对 齐 的 方式 ， 另 外 采用 “Marker Felt” 字 体 ， 接 下 来 就 是 设置 字体 的 
位 置 和 颜色 等 操作 。 
17.5 Ф) 


本 章 介绍 了 一 款 简单 的 纵 版 射击 游戏 的 实现 过 程 ， 讲 解 了 采用 Cocos2D-X 基 本 知识 实现 游戏 功能 的 方法 ， 读 者 可 以 自己 实现 相关 的 功能 并 进一步 修改 示例 代码 。 


第 18 章 介绍 Cocos2D-X 的 横 版 动作 游戏 一 一 劳 莉 快 跑 。 


第 18 章 “模版 动作 游戏 : SRA 


第 17 章 介绍 了 Cocos2D-X 的 纵 版 射击 游戏 噶 星 战争 的 实现 ， 本 章 介绍 横 版 动作 游戏 的 实现 ， 两 个 游戏 的 实现 特点 完全 不 同 ， 相 信 通 过 本 章 的 学 习 ， 你 会 进一步 了 解 Cocos2D-X 横 版 动作 游戏 的 特点 。 


18.1 ” 横 版 动作 游戏 的 特点 


横 版 动作 游戏 也 是 一 种 比较 传统 的 游戏 ， 在 各 种 游戏 平台 也 都 有 非常 经 典 的 游戏 作品 ， 从 最 早 的 过 关 解 文 游戏 ， 到 iOS 和 Android 平 台 的 跑 酷 类 游戏 ,无论 怎样 改变 ， 都 有 动作 游戏 的 基本 特点 。 该 类 游 
戏 共同 具有 的 特点 如 下 。 


` 滚动 的 背景 : 主角 一 直 控 制 在 屏幕 范围 内 ， 让 玩家 感觉 到 “移动 ”的 方式 就 是 背景 的 前 后 滚动 ， 可 以 使 用 缓冲 背景 并 移动 的 方式 来 达到 滚动 的 效果 。 在 横 版 动作 游戏 中 ， 还 要 处 理 主角 与 地 图 的 碰撞 


主角: 由 玩家 控制 的 对 象 ， 玩 家 控制 它 的 移动 ， 通 过 按键 或 触摸 来 移动 主角 ， 包 括 控 制 玩 家 移动 、 跳 跃 等。 
О 处 理 碰撞 对 象 : 包括 敌人 和 金币 等 对 象 。 


18-1 所 示 为 经 典 横 版 动作 游戏 超级 玛丽 截图 。 
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图 18-1 经典 横 版 动作 游戏 超级 玛丽 截图 


萝 莉 快 跑 游戏 结合 了 传统 横 版 动作 游戏 和 App Store 平台 上 的 跑 酷 类 游戏 的 特点 ， 采 用 了 App store 上 十 分 流行 的 卡通 风格 ， 主 角 是 一 个 叫 萝 莉 的 小 女孩 ， 如 图 18-2 所 示 。 


游戏 规则 依然 采用 App Store 游戏 中 很 流行 的 生存 模式 ， 主 角 萝 莉 需要 在 地 图 中 不 断 地 跳跃 ， 在 游戏 中 需要 收集 小 星星 提高 自己 的 分 数 ， 小 星星 如 图 18-3 所 示 。 
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本 实例 的 界面 和 流程 较 简单 ， 包 括 主 菜 单 、 关 于 、 游 戏 过 程 等 界面 。 


主 菜单 包括 游戏 开始 等 按钮 ， 也 包括 声音 控制 等 功能 ， 界 面 如 图 18-4 所 示 。 


8184 + Фла 


关于 界面 就 是 展示 游戏 信息 的 界面 ， 如 图 18-5 所 示 。 
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818-5 “关于 界面 


主 游戏 界面 是 游戏 的 主要 功能 界面 ， 包 括 游戏 的 主 逻 辑 (包括 地 图 的 滚动 、 主 角 的 跳跃 、 主 角 和 星星 的 碰撞 以 及 主角 的 分 数 ) 等 。 另 外 游戏 中 的 地 图 中 存在 一 些 有 意思 的 卡通 风格 的 图 素 ， 如 仙人 掌 、 


小 蘑菇 等 ， 如 图 18-6 所 示 。 
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图 18-6” 主 游戏 界面 


游戏 失败 后 ， 游 戏 结束 界面 在 主 游戏 界面 的 基础 上 调 出 ， 单 击 Back To Menu 按 钮 可 以 回 到 主 菜单 重新 开始 游戏 ， 如 图 18-7 所 示 。 


图 18-7 ”游戏 结束 界面 


第 17 章 介绍 了 游戏 开发 中 的 “ 豪 饪 ”思想 ， 即 游戏 场景 作为 一 个 “容器 ” 盛 放 游 戏 “ 菜 肴 ” ， 而 游戏 “菜肴 ” 则 由 游戏 “材料 ”组 成 。 本 章 介绍 游戏 开发 中 的 有 限 状 态 机 思想 ， 所 谓 “ 有 限 状 态 机 ”， 
是 表示 有 限 个 状态 以 及 在 这 些 状态 之 间 转 移 和 动作 等 行为 的 数学 模型 。 在 游戏 开发 中 ， 有 限 状态 机 思想 用 于 存储 游戏 状态 和 游戏 对 象 状 态 。 对 于 不 同 的 状态 ， 对 应 不 同 的 游戏 逻辑 ， 因 此 分 清 游 戏 中 的 状态 
是 一 个 游戏 开发 成 功 的 关键 ， 尤 其 在 Cocos2D-X 游 戏 开 发 中 ， 由 于 区 分 了 不 同 的 “场景 ”， 开 发 者 不 需要 再 管理 游戏 状态 了 ， 只 管理 每 个 界面 中 对 象 的 状态 就 可 以 了 ， 在 萝 莉 快 跑 中 ， 就 可 以 很 好 地 体现 有 
限 状 态 机 的 概念 。 


18.3 ” 主 游 戏 模块 组 成 元 素 的 实现 
主 游戏 界面 作为 一 个 容器 ， 在 这 个 游戏 中 的 主 游戏 逻辑 中 除了 游戏 的 Ul (包括 分 数 等 ) ， 还 包括 主角 萝 莉 、 星 星 和 地 图 等 ， 下 面 首先 介绍 游戏 主角 萝 莉 的 实现 。 
18.3.1 АУЗ 


与 第 17 章 中 的 主角 小 猫 不 同 ， 这 个 实例 中 主角 使 用 的 是 单 帧 图 动画 ， 萝 莉 的 资源 图 片 如 图 18-8 所 示 。 


AERE РЕН ЕШ НЫ ЕШ ЕШШ РИН ERG ЕШ. 


s hurt.pnz 
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在 这 些 图 片 资源 中 ， 从 s_1.png 到 s 8.png 均 为 萝 莉 奔跑 时 的 动画 单 帧 图 ， 这 些 单 帧 图 连续 播放 就 可 以 实现 奔跑 的 动画 效果 。 另 外 s jump.png 是 跳跃 的 贴图 s hurt.png 是 受伤 的 贴图 ， 有 具体 的 状态 切换 和 
贴图 后 面 会 做 详细 介绍 ， 首 先 介绍 主角 类 定义 文件 GameObjHero.h， 见 代码 清单 18-1。 


代码 清单 18-1 ”主角 类 GameObjHero 定 义 文件 


class GameObjHero : public Node 


Sprite *mainsprite; 
Texture2D *hurt; 
Texture2D *jump; 
Point offset; 

short state;// 0: 


bool iscontrol; 

GameObjHero (void); 

virtual -GameObjHero (void); 
void setState (short var); 
Rect rect(); 
virtual void onEnter(); 

virtual void onExit(); 

void jumpend(cocos2d::Ref* pSender); 
void hurtend(cocos2d::Ref* pSender); 


// 
触摸 相关 函数 


virtual 
virtual 
virtual 


bool ccTouchBegan (Touch* 
void ccTouchMoved (Touch* 
void ccTouchEnded (Touch* 


}; 


touch, 
touch, 
touch, 


Event* 
Event* 
Event* 


其 中 使 用 mainsprite 作 为 指针 指向 主角 主体 的 精灵 对 象 ， 


х9) 


限 的 游戏 项 目 中 ， 加 快速 度 的 常用 方式 。 另 


主角 劳 莉 的 创建 比较 简单 ， 首 先 创建 基础 节 


代码 清单 18-2 ”主角 萤 莉 的 创建 


void GameObjHero::onEnter () 


mo 


点 ， 并 在 基础 节 


这 个 游戏 的 触摸 部 


event); 
event); 
event); 


hurt 和 jump 指 向 主角 的 受伤 和 跳 起 贴图 。 
分 比较 简单 : 


点 上 添加 各 种 精灵 拼接 成 主角 ， 创 建 的 具体 过 程 


// 
基础 节点 
Node: :onEnter(); 
this-»setContentSize (Size (85,90)); 
// 
受伤 
Sprite * obj = Sprite::create("s hurt.png"); 
hurt = obj-»getTexture(); 
obj = CCSprite::create("s jump.png"); 
jump = obj-»getTexture () ; 
mainsprite — CCSprite::create("s l.png"); 
2 
动画 
Animation * animation = Animation::create(); 
animation-»addSpriteFrameWithFile("s 1.png"); 
animation-»addSpriteFrameWithFile("s 2.png"); 
animation-»addSpriteFrameWithFile ("s 3.png"); 
animation-»addSpriteFrameWithFile ("s 4.png"); 
animation-»addSpriteFrameWithFile("s 5.png"); 
animation-»addSpriteFrameWithFile("s 6.png"); 
animation-»setDelayPerUnit (0.1f); 
p pese. tRestoreOriginalFrame (true); 
—— 
mainsprite 
-»runAction( 
CCRepeatForever::create (CCAnimate::create (animation))); 
state = 0; 
addChild (mainsprite); 
auto touchListener = EventListenerTouchOneByOne::create(); 
 touchListener-»setSwallowTouches (false); 
/ 
触摸 相关 
_touchListener->onTouchBegan = 
CC CALLBACK 2 (GameObjHero: :ccTouchBegan, this); 
_touchListener->onTouchMoved = 
CC CALLBACK 2 (GameObjHero::ccTouchMoved, this); 
touchListener->onTouchEnded = 
CC CALLBACK 2 (GameObjHero::ccTouchEnded, this); 
// 
触摸 事件 注册 
 eventDispatcher 
-»addEventListenerWithFixedPriority( touchListener,-129); 


首先 是 创建 精灵 ， 然 后 
代码 清单 18-3 ”主角 萝 莉 的 状态 切换 


void GameObjHero::setState (short Var) { 
if(state == var) 

return; 

state = var; 

switch (state) { 


case 1:// 
跳跃 


this-»stopAllActions(); 
mainspri 


// 


mainspri 


// 


this-»runAction( 
Sequence: 
CallFuncN: 

CC CALI 

NULL) ) 


:create( 


break; 
case 2:// 


ка 
NT 


this-»stopAllActions(); 
mainsprite-»s 
mainspri 
this-»runAction (Sequence: 


BACK 1 (GameObjHero: 


创建 精灵 对 应 的 动画 ， 最 后 播放 “ 跑 动 ”动画 ， 并 且 把 主角 的 状态 ; 


te-»stopAllActions (); 


te-»setTexture (jump); 


:create (JumpBy: : create (2.5, Point (0,0) 


topAllActions (); 
te-»setTexture (hurt); 
:create (Blink: 


CallFuncN::create( 
CC CALI 

NULL)); 
((GameMain *) 
break; 

case 0:// 


this-»stopAllActions(); 


BACK 1 (GameObj 


this-»getParent ()) 


,100,1), 


:jumpend, this)), 


:create(3, 10), 


Hero: 


:hurtend,this)), 


-»setover(); 


mainsprite-»stopAllActions (); 

Animation * animation = Animation::create(); 
animation-»addSpriteFrameWithFile("s 1.png"); 
animation-»addSpriteFrameWithFile ("5 2.png"); 
animation-»addSpriteFrameWithFile("s 3.png"); 
animation-»addSpriteFrameWithFile ("s 4.png"); 
animation-»addSpriteFrameWithFile ("s 5.png"); 
animation-»addSpriteFrameWithFile("s 6.png"); 
animation-»setDelayPerUnit (0.1f); 
animation-»setRestoreOriginalFrame (true); 
mainsprite-»runAction( 
RepeatForever::create (Animate: :create (animation))); 


break; 
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1) 首先 清除 上 一 个 状态 相关 的 内 容 。 你 无 法 知道 “上 一 状态 ”是 什么 的 ， 尤 其 在 复杂 的 游戏 中 ， 主 角 可 能 会 有 几 十 个 状态 ， 
另外 一 种 是 通过 一 个 变量 来 记录 “上 一 个 状态 ”具体 是 哪个 ， 然 后 根据 这 个 变量 来 判断 什么 数据 是 需要 清除 的 ， 


18-9 所 示 。 


置 状态 的 作用 。 设 置 状态 整体 上 可 以 分 为 两 步 : 


这 样 做 的 目的 是 可 以 在 游戏 中 随时 根据 要 求 变化 主角 的 贴图 ， 而 不 需要 加 载 ， 在 内 存 没 
点 击 屏幕 人 物 则 跳跃 ， 由 于 是 控制 主角 的 移动 ， 为 了 清晰 依然 把 触摸 的 控制 部 分 放 到 主角 当中 。 


见 代码 清单 1 8- 2。 


这 时 有 两 种 处 理 办 法 ， 
这 往往 在 规模 比较 大 的 游戏 中 被 采用 


达到 机 器 极 


受 置 为 0， 也 就 是 正常 状态 。 关 于 主角 萝 莉 的 状态 切换 见 代 码 清单 18-3。 


一 种 是 将 目前 所 有 和 状态 相关 的 变量 全 部 重 置 一 遍 , 


， 这 个 游戏 采用 第 一 种 方法 。 首 先 来 看 正常 状态 ， 如 图 


2) 然后 就 是 设置 当前 状态 的 相关 内 容 ， 比 如 设置 新 的 动画 和 动作 等 。 
有 时 这 两 步 没 有 明显 的 界限 ， 因 为 有 些 变量 值 是 在 两 个 状态 中 都 使 用 的 ， 设 置 新 的 值 就 等 于 间接 删 了 旧 的 值 。 
这 个 状态 中 ， 萝 莉 是 “移动 ”的 ， 之 所 以 要 加 上 引号 ， 因 为 人 物 并 非 真正 移动 ， 而 是 相对 于 地 图 “移动 ”， 这 点 会 在 以 后 详细 介绍 ， 这 里 只 要 认 清 这 个 状态 下 萝 莉 是 没有 真正 的 位 移 和 速度 的 。 


萝 莉 跳跃 状态 如 图 18-10 所 示 。 


18-0 ” 萝 莉 的 正常 状态 


| 
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图 18-10” 蔓 痢 的 跳跃 状态 


， 分 别 由 x 轴 上 的 匀速 运动 和 y 轴 方向 的 上 抛 运动 组 合 而 成 。 


由 于 萝 莉 和 地 图 有 相对 移动 ， 所 以 这 里 的 跳跃 其 实 就 是 一 个 原 地 跳跃 的 动作 ， 而 根据 物理 学 中 的 速度 合成 原理 ， 不 同方 向 的 速度 组 合 就 会 产生 合 速度 ， 而 萝 莉 在 跳跃 时 “ 合 速度 ”的 轨迹 就 是 一 个 抛物 


萝 莉 的 受伤 动作 如 图 18-11 所 示 。 
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这 个 游戏 没有 “ 血 量 ”， 只 有 一 次 失败 的 机 会 ， 也 就 是 说 “受伤 ”就 是 游戏 结束 ， 这 个 状态 要 停 掉 所 有 的 动画 ， 设 置 贴图 为 受伤 ， 并 且 调用 闪烁 动作 。 


这 三 个 动作 中 ， 当 劳 莉 掉 落 最 岩 触发 时 受伤 动作 ， 正 常 动作 是 默认 状态 ， 跳 跃 动作 完成 后 也 会 回 到 这 个 状态 。 跳 跃 动作 是 由 玩家 触摸 屏幕 的 任意 一 个 位 置 触发 的 ， 触 摸 控 制 函数 见 代码 清单 18-4。 


bool GameObjHero: :ccTouchBegan (CCTouch* touch, CCEvent* event) 


if(((GameMain *)this-»getParent ())-»isover) 
return false; 
// 
设置 运动 状态 


SetState (1); 
return true; 


ке 


这 时 只 需要 判断 游戏 是 否 结束 ， 如 果 游 戏 结束 ， 则 不 作 跳 跃 处 理 。 


18.3.2 ”星星 的 实现 


星星 在 这 个 游戏 中 的 作用 是 ， 如 果 玩 家 跳跃 准确 ， 就 可 以 吃 到 星星 获得 相应 的 奖励 分 数 。 星 星 类 继承 自 节点 类 ，GameObjStar 的 定义 见 代码 清单 18-5。 


代码 清单 18-5 ”星星 类 定义 


class GameObjStar : public Node 
{ 
public: 
GameObjStar (void); 
short state; 
virtual -GameObjStar (void); 
virtual void onEnter(); 
virtual void onExit(); 
bool visable; 
void set visable (bool var); 
bool get visable(); 


除了 基本 的 初始 化 函数 外 ， 和 第 17 章 的 子弹 类 一 样 ， 使 用 一 个 变量 来 记录 这 个 星星 是 否 显示 ， 如 果 被 吃 掉 则 不 再 显示 ， 也 就 不 需要 判断 它 和 萝 莉 的 碰撞 了 。 


18.3.3 ”地 图 的 实现 


在 动作 类 游戏 中 ， 地 图 占据 很 重要 的 位 置 ， 无 论 是 恶魔 城 还 是 超级 玛丽 ， 都 在 地 图 的 实现 上 作 了 很 大 文章 。 通 过 观察 这 类 游戏 ， 不 难得 出 一 个 结论 ， 这 类 游戏 都 是 采用 将 大 的 地 图 “分 而 治之 ”的 办 
法 ， 用 简单 的 尺寸 较 小 的 图 素 拼接 成 大 的 地 图 。 这 样 做 有 两 个 好 处 ,一 是 可 以 节省 内 存 的 开销 ， 另 一 个 就 是 这 些 地 图 各 自 带 着 “数据 ”， 方 便 我 们 针对 不 同 的 地 图 块 作 相应 的 处 理 ， 增 加 游戏 的 可 玩 性 。 


表 18-1 是 萝 莉 快 跑 游戏 中 使 用 的 图 素 。 


表 18-1 萝 莉 快 跑 游戏 图 素 列表 


s 号 | 8H X — B Е Ж 


合成 一 段 地 面 


| ва _ и 


对 应 两 种 图 条 ， 起 到 相同 的 效 采 


表示 深渊 部 分 ， 萝 莉 挥 到 深 清 ， 游 戏 和 失败 


地 图 的 拼接 在 GameConst.h 中 给 出 数据 ， 在 游戏 中 按照 这 个 编号 来 拼接 地 图 ， 地 图 数据 见 代 码 清单 18-6。 


代码 清单 18-6 ”拼接 地 图 数据 


static const short bgishu[] = {-1,1,0,2,-1,1,2,3};// 
背景 图 素 块 编号 
static const short bg2shu[] = (3,3,-1,3,-1,3,3,-1); 


ДЕ УМИ СатеОЫјМар опЕпїега н, Ес + ЛИЕ, ВЕДЕ 18-1285. 


. 


818-12 ”背景 底 图 资源 
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aj 
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添加 两 张 背 景 图 的 过 程 见 代码 清单 18-7。 


代码 清单 18-7 添加 两 张 背 景 图 


// 

背景 初始 化 
Sprite* bgl = Sprite::create ("back l.png"); 
// bgi-»setScale (0.5); 
bgi-»5setAnchorPoint (Point (0,1)); 
bgi-»5setPosition(Point(0, size.height / 2) ); 
this-»addChild (bg1,0,0); 
Sprite* bgdil = Sprite::create ("back 5.png"); 
bgdil-»setAnchorPoint (Point (0,0)); 
bgdil-»setPosition (Point(0,-124) ); 
bgi-»addChild (рдаі1, 1); 
Sprite* bg2 = Sprite::create ("back l.png"); 


// 
设置 位 置 
bg2-»setAnchorPoint (Point (0,1)); 
bg2-»setPosition(Point(size.width, size.height / 2) ); 
this-»addChild (bg2,0,1); 
Sprite* bgdi2 = Sprite::create ("back 5.png"); 
bgdi2-»setAnchorPoint (Point (0,0)); 
bgdi2-»setPosition (Point(0,-124) ); 
bg2-»addChild (bgdi2,1); 
bgi-»runAction( 
CCSequence: : create (MoveBy: :create (10, Point (-960,0)), 
CallFuncN::create(CC CALLBACK 1 (GameObjMap: :bglchange,this)), 
NULL)); 
bg2-»runAction (CCSequence: :create (MoveBy: : create (20, Point (-1920,0)), 
CallFuncN::create(CC CALLBACK 1 (GameObjMap: :bg2change,this)), 
NULL)); 


和 第 17 章 的 游戏 类 似 ， 这 个 示例 也 是 初始 化 两 个 屏幕 大 小 的 地 图 ， 一 张 显示 另 一 张 作 为 缓冲 ， 等 待 现实 ， 两 张 地 图 交 著 制造 出 地 图 移动 的 效果 ， 进 而 实现 出 人 物 在 地 图 上 移动 的 效果 ， 地 图 移动 交 蔡 见 
代码 清单 18-8。 


代码 清单 18-8 ”地 图 移动 交替 


void GameObjMap::bglchange (cocos2d::Ref* pSender)( 


// 
运动 出 屏幕 重 设 位 置 ， 运 动 
Sprite * bg = (Sprite *)this-»getChildByTag (0); 
bg-»setPosition (Point (960,320)); 
bg-»runAction (Sequence: :create (MoveBy: :create (20, Point (-1920,0)), 
CallFuncN::create( 
CC CALLBACK 1 (GameObjMap::bglchange,this)), 
NULL)); Е 
for(int i = 0zi < 5;1 ++){ 
((GameObjStar *)starsl 
-»getObjectAtIndex(i))-»set visable (true); 


} 


} 
void GameObjMap::bg2change (cocos2d::Ref* pSender)( 


// 
运动 出 屏幕 重 设 位 置 ， 运 动 
Sprite * bg = (Sprite *)this-»getChildByTag (1); 
bg-»setPosition (Point (960, 320)); 
bg-»runAction (Sequence: :create (MoveBy: :create (20, Point (-1920,0)), 
CallFuncN::create( 
CC CALLBACK 1 (GameObjMap: :bg2change, this)), 
NULL)); 
for(int i = 01 < 5;1 ++){ 
((GameObjStar *)stars2 
-»getObjectAtIndex(i))-»set visable (true); 


这 两 个 函数 都 是 在 地 图 移动 交替 时 被 调用 ， 可 以 看 到 ， 星 星 被 重新 初始 化 为 可 见 的 ， 整 个 地 图 被 放 到 屏幕 的 右边 继续 等 待 移动 入 屏幕 。 地 图 移动 的 效果 对 比如 图 18-13 所 示 。 
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onEnter 函 数 中 添加 星星 的 部 分 见 代 码 清单 18-9。 


代码 清单 18-9 onEnter 函 数 中 添加 星星 


Starsl = . Array::create(); 

stars2 = Array::create(); 

for(int i = 0;i < 5;i ++){ 
GameObjStar* obj new GameObjStar(); 
obj-»setPosition(Point(172 + 192 * i1,350)); 
starsl-»addObject (obj); 
bgi-»addChild (0bj,3); 
obj new GameObjStar(); 
obj-»setPosition(Point(172 + 192 * 1,350)); 
stars2-»addObject (obj); 
bg2-»addChild (0bj,3); 


} 
starsl-»retain(); 
stars2-»retain(); 


可 以 看 到 ， 这 里 也 是 把 所 有 的 星星 都 放 到 一 个 数组 里 ， 和 第 17 章 把 子弹 放 入 一 个 数组 中 的 效果 是 一 样 的 ， 这 样 做 是 为 了 方便 整体 的 管理 。 地 图 图 素 的 添加 见 代 码 清单 18-10。 


代码 清单 18-10 ”添加 地 图 图 素 和 大 图 素 等 


// 
星星 ， 植 物 等 大 图 素 的 添加 
for(int і = 0;1 < 7;1 ++) { 
Sprite* roaddi; 
Sprite* plant; 
if(bgishu[i] != -1)( 
Sprite* road; 
switch (bglshu[i])í 


case 0: 
24 
树 
plant = Sprite::create ("back 2.png"); 
plant-»setAnchorPoint (Point (0.5,0)); 
plant-»setPosition( Point(128 * i + 64,117) 
bgi-»addChild (plant, 1); 
// 
地 面 
road = Sprite::create ("road 2.png"); 
road-»setAnchorPoint (Point (0,0)); 
road-»setPosition( Point(128 * i,0) ); 
// 
墙 
roaddi = Sprite::create("road 3.png"); 
roaddi-»setAnchorPoint (Point (0,1)); 
roaddi->setPosition( Point(128 * 1,0) ); 
bgl->addChild(roaddi; 1); 
break; 
case 1: 
// 
路 
road = Sprite::create ("road 1.png"); 
road-»setAnchorPoint (Point (0,0)); 
road-»setPosition( Point(26 + 128 * 1,0) ); 
// 
墙 
roaddi = Sprite::create ("road 4.png"); 
roaddi-»setAnchorPoint (Point (0,1)); 
roaddi-»setPosition( Point(26 + 128 * 1,0) 
№91->ааасһі1а (roaddi, 1); 
break; 
case 2: 
仙人 掌 
plant = Sprite::create ("enemy.png"); 
plant-»setAnchorPoint (Point (0.5,0)); 
plant-»setPosition( Point(128 * i + 64,112) 
bgi-»addChild (plant, 1); 
// 
路 
road = Sprite::create ("road 1.png"); 
road-»setFlippedX (true); 
road-»setAnchorPoint (Point (0,0)); 
road-»5setPosition( Point(128 * i,0) ); 
// 
墙 
roaddi = CCSprite::create ("road 4.png"); 
roaddi-»setFlippeGdX (true); 
roaddi-»setAnchorPoint (Point (0,1)); 
roaddi-»setPosition( Point(128 * i,0) ); 
bgi-»adaChild (roaddi, 1); 
break; 
case 3: 
// 
浮 台 


road = Sprite::create ("road 5.png"); 
road-»setAnchorPoint (Point (0,0)); 
road-»setPosition( Point(128 * 1,0) 
break; 


); 


} 
bgi-»addChild (road, 1); 
} 
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图 18-13 


地 图 移动 的 效果 对 比 


); 


); 


); 


路 


ED 


路 面 


H- 


f(bg2shu[i] != -1){ 


Sprite* roadl; 
switch (bg2shu[i]){ 
case 0: 


// 


roadl = Sprite::create ("road 2.png"); 
roadl->setAnchorPoint (Point (0,0)); 
roadl->setPosition( Point (128 * i,0) ); 


// 


roaddi = Sprite::create ("road 3.png"); 
roaddi->setAnchorPoint (Point (0,1)); 
roaddi-»setPosition( Point(128 * i,0) ); 
р92->ааасһі1а (roaddi, 1); 

break; 


case 1: 


plant = Sprite::create ("back 3.png"); 
plant-»setAnchorPoint (Point (0.5,0)); 


plant-»setPosition( Point(128 * i + 128,117) ); 


р92->ааасһі1а (plant, 1); 

roadl = Sprite::create("road 1l.png"); 
roadil-»setAnchorPoint (Point (0,0)); 
roadi-»5setPosition( Point(26 + 128 * i,0) ); 
roaddi = Sprite::create ("road 4.png"); 
roaddi-»setAnchorPoint (Point (0,1)); 
roaddi-»setPosition( Point(26 + 128 * i,0) ); 
р92->ааасһі1а (roaddi, 1); 

break; 


— 


case 2: 


// 


roadl = Sprite::create ("road 1l.png"); 
roadi-»setFlippedX (true); 
roadil-»setAnchorPoint (Point (0,0)); 
roadi-»5setPosition( Point(128 * i,0) ); 


// 


roaddi = Sprite::create ("road 4.png"); 
roaddi-»setFlippedX (true); 
roaddi-»setAnchorPoint (Point (0,1)); 
roaddi-»setPosition( Point(128 * i,0) ); 
р92->ааасһі1а (roaddi, 1); 

break; 


case 3: 


// 


гоааї = Sprite::create("road 5.png"); 
roadl-»setAnchorPoint (Point (0,0)); 
roadi-»setPosition( Point(128 * i,0) ); 
break; 


} 
bg2-»adachild (road1, 1); 


这 里 列 出 为 第 一 张 背 景 块 添加 图 素 的 代码 ， 第 二 张 背 景 和 第 一 张 类 似 ， 这 里 就 不 袭 述 了 ， 除 了 添加 地 图 图 素 ， 还 要 添加 大 图 素 ， 大 图 素 的 资源 如 图 18-14 所 示 。 
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图 18 


-14 地 图 背景 大 图 素 


提示 背景 大 图 素 没 有 实际 意义 ， 只 是 起 到 装饰 作用 ， 之 所 以 称 之 为 “大 图 素 ” 还 有 一 个 原因 ， 就 是 它们 的 大 小 往往 不 受 图 素 大 小 的 限制 。 


18.4” 莹 章 快 跑 的 实现 


下 面 介绍 萝 莉 快 跑 游戏 至 模块 的 实现 。 


18.4.1 


游戏 主 模块 的 实现 


主 游戏 部 分 的 整合 是 将 地 图 、 萝 莉 和 星星 整合 在 一 起 ， 另 外 分 数 UI 沿 用 了 第 11 章 介绍 的 分 


代码 清单 18-11 


主 游戏 部 分 的 初始 化 


数 ， 这 里 就 不 赣 述 了 。 主 游戏 部 分 的 初始 化 见 代码 清单 18-11。 


bool GameMain::init() 


=~ H- 


f ( !CCLayer::init() ) 


return false; 


1 
屏幕 尺寸 
Size size = Director::getInstance()-»getVisibleSize(); 
map = new GameCbjMap(); 


map-»sel 


tAnchorPoint (Point (0,1)); 


map-»sel 


cPosition (Point (0,size.height)); 


addChild (map, 0); 
hero = new GameObjHero(); 


hero-»setPosition (Point (200,320)); 
adachild (hero,1); 
gamemark = new GameMark () ; 
addChild (gamemark, 4); 
gamemark = new Сатемагк () ; 
addChild (gamemark, 4); 
// 
游戏 结束 
gameover = CCSprite::create ("gameover.png"); 
gameover-»setAnchorFPoint (Point (0.5,0.5)); 
gameover-»setPosition (Point (0,0)); 
gameover-»setPosition (Point (size.width/2,size.height/2 + 70)); 
gameover-»setVisible (false); 
addChild (gameover, 5); 
/ 


pi 
lr 
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MenuItemImage *pCloseItem = 

MenuItemImage: :create ("back.png","back.png", 
CC CALLBACK 1 (GameMain::menuBackCallback,this)); 
pCloseItem->setPosition( Point(size.width/2,size.height/2 - 50) ); 
pCloselItem-»setScale (0.5); 

Menu* pMenu = Menu::create (pCloseItem, NULL); 
pMenu-»setPosition (Point: :ZERO); 
this-»addChild (pMenu, 5,25); 

pMenu-»setVisible (false); 

pMenu-»setEnabled (false); 

isover - false; 

scheduleUpdate (); 

return true; 


顺序 是 依次 放置 地 图 、 主 角 和 Ul。 
游戏 的 逻辑 函数 update 里 需要 判断 两 个 内 容 : 一 个 是 萝 莉 是 否 踩 空 从 而 游戏 失败 ， 另 一 个 内 容 是 星星 是 否 被 萝 莉 吃 到 ， 见 代码 清单 18-12。 


代码 清单 18-12 ”游戏 的 逻辑 函数 update 


void GameMain::update(float time) { 

f(hero-»state == 0) 
isherodrop(); 

Point pl = (map-»getChil 

Point p2 = (map-»getChil 


// 
主角 是 否 吃 到 星星 检测 
for(int i = 0;1 < 5;i ++){ 
if(pl.x <= 100 && (pl.x + 480) >= 100) { 
GameObjStar *obj = 
(GameObjStar *) (map-»starsl)-»getObjectAtIndex (1); 


H- 


` 


ByTag (0) )->getPosition (); 
ByTag (1) )->getPosition (); 


о, О, 


~ 


if(obj-»get visable() && 
isCollion (Point (100,hero-»getPosition().y 
+ 62.5),Point(pl.x + 86 + 96 * 1,280), 40,35,18.25,17.75)) { 
obj-»set visable (false); 
gamemark-»addnumber (200); 
Jelse( 


GameObjStar *obj = (GameObjStar *) (map-»stars2) 
-»getObjectAtIndex (i); 
if(obj-»get visable() && isCollion (Poin 
hero-»getPosition().y + 62.5),Poin 
1,280),40,35,18.25,17.775)) { 
obj-»set visable (false); 
gamemark->addnumber (200) ; 


(100, 
(p2.x + 86 + 96 * 
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代码 清单 18-13 ЈИЕ ER S B ERA 


void GameMain::isherodrop()í 


/ / 
判断 主角 是 否 从 地 图 掉 落 
Point p1 = (map->getChildByTag (0))-»getPosition(); 
Point p2 = (map->getChildByTag (1))-»getPosition(); 
int temp; 
if(pl.x <= 200 && (pl.x + 960) >= 200) { 
temp = (200 - р1.х) / 128; 
if(bglshu[temp] == -1) { 
hero-»setState (2); 


Jelse( 
temp = (200 - p2.x) / 128; 
if(bg2shu[temp] == -1) { 


hero-»setState (2); 


如 果 莹 者 没 有 躁 到 地 面 游戏 失败 ， 设 置 游 戏 失败 见 代 码 清单 18-14。 
代码 清单 18-14 ”设置 游戏 失败 


void GameMain::setover()Íí 


// 

游戏 结束 
Menu* pMenu = (Menu *)this->getChildByTag (25); 
pMenu->setVisible (true); 
pMenu-»setEnabled (true); 
gameover-»setVisible (true); 
gameover-»setOpacity (0) ; 
pMenu-»setOpacity (0) ; 
pMenu-»runAction (FadeIn::create(0.5)); 
gameover-»runAction (FadeIn::create(0.5)); 
isover - true; 


游戏 失败 萝 莉 调用 闪烁 动作 ， 一 帧 显示 另外 一 帧 不 显示 ， 另 外 弹出 返回 主 菜单 的 按钮 ， 如 图 18-15 所 示 。 
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图 18-15 ”游戏 结束 


18.4.2 ”游戏 主 菜单 的 实现 


主 菜单 的 实现 和 第 17 章 的 类 似 ， 只 是 屏幕 要 横 过 来 ， 需 要 修改 一 些 布局 和 坐标 ， 见 代码 清单 18-15。 


代码 清单 18-15” 主 菜单 初始 化 


bool GameMenu::init() 


if ( !Layer::init() ) 
{ 


) 


Size size = Director::getInstance()-»getVisibleSize(); 


return false; 


B 
菜单 背景 


Sprite* bg = Sprite::create ("MainMenu.png"); 
bg-»setPosition(Point(size.width/2, size.height/2)); 
this-»addChild (bg, 0,0); 
// 
按钮 
MenultemImage *newGameltem = MenultemImage::create ("newgameA.png", 
"newgameB.png",CC CALLBACK 1 (GameMenu: :menuNewGameCallback, this)); 
newGameltem-»setPosition(Point(size.width / 2 + 40,size.height / 2 - 20)); 
newGameltem-»setEnabled (false); 
MenultemlImage *continueItem = 
MenultemImage::create ("continueA.png", 
"continueB.png", 
CC CALLBACK 1 (GameMenu: :menuContinueCallback,this)); 
continueItem-»setPosition(Point(size.width / 2 + 40, 
size.height / 2 - 100)); 
continueItem-»setEnabled (false); 
MenulItemImage *aboutlItem = MenultemImage::create ("aboutA.png", 
"aboutB.png",CC CALLBACK 1 (GameMenu::menuAboutCallback,this)); 
aboutItem-»setPosition(Point(size.width / 2 + 40, size.height / 2 
- 180)); 
aboutlItem-»setEnabled (false); 
soundlItem = MenultemIimage::create ("sound-on-A.png", 
"sound-on-B.png",CC CALLBACK 1 (GameMenu: :menuSoundCallback, this)); 
soundItem-»setEnabled (false); 
soundItem-»setPosition (Point (40,40)); 


Menu* mainmenu = 
Menu: : create (newGameItem,continueItem, 
aboutItem,soundItem, NULL); 
mainmenu-»setPosition (Point (0,0)); 
mainmenu-»setEnabled (true); 
this-»addaChild (mainmenu, 1,3); 
issound - true; 


// 
初始 化 声音 
SimpleAudioEngine::getInstance|() 
-»preloadBackgroundMusic( "background.mp3" ); 
SimpleAudioEngine::getInstance()-»setBackgroundMusicVolume (0.5); 
SimpleAudioEngine::getInstance|() 
-»playBackgroundMusic ("background.mp3", true); 
return true; 


和 第 17 章 不 同 的 是 ， 这 个 项 目 在 切换 界面 的 时 候 采 用 的 是 场景 切换 效果 ， 如 图 18-16 所 示 。 
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图 18-16 ”场景 切换 效果 


现 这 个 效果 的 代码 见 代码 清单 18-16。 
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void GameMenu: :menuNewGameCallback (Ref* pSender) 

{ 
Director::getInstance()-»setDepthTest (true); 
Director::getInstance|() 
-»replaceScene (TransitionPageTurn::create(0.5,GameMain::scene(), 
false)); 

) 


另外 ， 被 切换 的 场景 要 实现 onEnterTransitionDidFinish 和 onExitTransitionDidStart 函 数 ，onEnterTransitionDidFinish 函 数 在 进入 这 个 界面 的 动画 运行 完 以 后 被 调用 ， 而 onExitTransitionDidStart 函 
数 则 在 离开 这 个 界面 的 动画 运行 完 以 后 被 调用 ， 见 代码 清单 18-17。 


amEÉmtarTrsmeitienTualEm ic 
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8-17 onExitTr: 


void GameMenu::onExitTransitionDidStart () 


{ 


Layer::onExitTransitionDidStart (); 


void GameMenu::onEnterTransitionDidFinish() 


{ 
Layer::onEnterTransitionDidFinish(); 
Director::getInstance()-»setDepthTest (false); 
Menu * mainmenu = (Menu *)this-»getChildByTag (3); 
mainmenu-»setEnabled (true); 

} 


bool GameAbout::init() 


| if ( !Layer::init() ) 
| return false; 
ee size = Director::getInstance()-»getVisibleSize(); 
Sprite* bg = Sprite::create ("back 1.png"); 


bg->setPosition (Point (size.width/2, size.height/2) ); 
this->addChild (bg, 0,0); 


// 

关于 框 
Sprite*kuang = Sprite::create("tb.png"); 
kuang-»setRotation (90); 
kuang-»setPosition (Point (size.width/2, size.height/2)); 
this-»addChild (kuang,2,2); 


char 1пЁ[256]; 

sprintf(inf,"name:loli run\n\nprogram: shuoduan man\n\nart 
design:zuyi li\n\ncompany:hz books\n\n 

powered by cocos2D-x"); 

LabelTTF * myjineng = LabelTTF::create (inf,"Marker 
Felt",40,Size(400,400),TextHAlignment::LEFT); 
myjineng-»setAnchorPoint (Point (0,1)); 

myjineng-»setColor (Color3B(0,0,0)); 
myjineng-»setPosition (Point (200,500)); 

this-»addChild (myjineng); 


// 

关于 标签 
Sprite*abouttitle = Sprite::create("about.png"); 
abouttitle-»5setPosition (Point (size.width/2, size.height - 20)); 
this-»adaChild (abouttitle,3,3); 
/7 
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MenuItemImage *back = MenultemImage::create 

("backA.png", "backB.png", 

CC CALLBACK 1 (GameAbout: :menuBackCallback, this)); 
back-»setPosition(Point(size.width - 20,size.height - 20)); 
back-»setEnabled (false); 

Menu* mainmenu = Menu::create (back, NULL); 
mainmenu-»setPosition (Point (0,0)); 

this-»addaChild (mainmenu, 3,4); 

return true; 


这 个 界面 采用 了 翻 页 的 界面 切换 方式 ， 如 图 18-17 所 示 。 
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图 18-17 关于 界面 切换 方式 


185 ”本 章 小 结 


本 章 介绍 一 个 简单 横 版 动作 游戏 的 实现 过 程 。 采 用 Cocos2D-X 的 基本 知识 实现 游戏 功能 的 方法 ， 可 以 自己 实现 相关 的 功能 并 进一步 修改 。 下 一 章 介绍 使 用 物理 引 警 实现 的 体育 类 游戏 。 


第 19 章 ”物理 体育 游戏 : 迷你 世界 杯 


17 章 和 18 章 分 别 介 绍 了 两 种 传统 类 型 游戏 : 纵 版 射击 游戏 和 横 版 动作 游戏 ， 两 个 实例 项 目 分 别 采用 JavaScript 和 和 C++ 开发， 本 章 介绍 物理 引擎 相关 游戏 开发 。 在 Cocos2D-X 3.0 中 ， 对 物理 引 警 和 游戏 
引擎 的 结合 有 了 很 大 的 优化 ， 本 实例 也 使 用 了 这 些 新 特性 ， 本 章 将 使 用 物理 引擎 开发 一 款 体育 类 游戏 一 一 迷你 世界 杯 。 


19.1 ”物理 并 戏 的 特点 


物理 类 游戏 不 是 一 种 传统 类 型 的 游戏 ， 甚 至 也 不 能 称 做 一 种 游戏 类 型 ， 只 是 在 移动 平台 上 ， 使 用 物理 引擎 的 游戏 获得 了 巨大 的 成 功 ， 其 中 包括 “愤怒 的 小 鸟 ” 和 采用 流体 物理 制作 的 “小 鳄鱼 爱 洗 
澡 ”。 图 19-1 为 移动 平台 经 典 物理 游戏 “愤怒 的 小 鸟 ”截图 。 


图 19-1 经典 游 戏 “ 愤 起 的 小 鸟 ? 


体育 类 游戏 包括 足球 、 篮 球 等 ， 本 章 的 实例 就 是 一 个 比较 小 型 的 足球 游戏 。 


19.2 ”迷你 世界 杯 简介 
下 面 对 迷 你 世界 杯 游戏 的 规则 、 框 架 和 界面 进行 简单 介绍 。 


1. 迷 你 世界 杯 游戏 规则 


迷你 世界 杯 游戏 结合 了 体育 类 游戏 的 规则 和 物理 类 游戏 的 碰撞 系统 ， 是 Q 版 卡通 风格 ， 主 角 是 按照 作者 本 人 形象 设计 的 ， 如 图 19-2 所 示 。 


图 19-2 游戏 主角 


游戏 规则 采用 足球 游戏 ， 把 球 踢 入 对 方 球门 得 1 分 ， 为 了 控制 游戏 每 局 时 间 ， 哪 方 先 得 3 分 哪 方 获胜 。 


下 面 介绍 迷你 世界 杯 游戏 框架 和 界面 。 


2. 迷 你 世界 杯 游戏 框架 和 界面 


本 游戏 的 界面 和 流程 较 简 单 ， 包 括 主 菜单 、 关 于 、 游 戏 过 程 、 结 算 、 暂 停 等 界面 。 


主 菜单 包括 游戏 开始 等 按钮 ， 也 包括 声音 控制 等 功能 ,界面 如 图 19-3 所 示 。 
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关于 界面 用 于 展示 游戏 信息 的 界面 ， 如 图 19-4 所 示 。 


图 19-4 关于 界面 


点 击 开 始 游 戏 后 ， 首 先进 入 “战备 界面 ”， 这 个 界面 显示 双方 的 头像 ， 点 击 中 间 的 足球 可 以 开始 比赛 ， 如 图 19-5 所 示 。 


图 19-5 ”战备 界面 


主 游戏 界面 是 游戏 的 主要 功能 界面 ， 包 括 主 角 的 碰撞 、 足 球 ， 以 及 得 分 判断 重新 发 球 等 。 另 外 游戏 的 地 图 中 存在 一 些 有 意思 的 卡通 风格 的 UI， 如 图 19-6 所 示 。 


19-6 ERRIN 


游戏 过 程 中 如 果 需 要 和 暂时 停止 或 者 返回 主 菜单 的 界面 时 ， 在 游戏 中 调用 暂停 界面 ， 功 能 和 主 菜单 类 似 ， 如 图 19-7 所 示 。 
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E197 暂停 界面 


游戏 结束 后 ， 在 主 游戏 界面 的 基础 上 调 出 结束 界面 ， 单 击 NEXT 按 钮 可 以 回 到 主 菜单 重新 开始 游戏 ， 也 可 以 直接 点 击 TRY AGAIN， 如 图 19-8 所 示 。 
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图 19-8 游戏 结束 界面 


下 面 分 别 介绍 迷你 世界 杯 中 主要 的 实现 。 


主 游戏 界面 作为 一 个 容器 ， 在 这 个 游戏 中 的 主 游戏 逻辑 中 除了 游戏 的 UI (包括 分 数 等 ) ， 还 包括 主角 、 对 手 以 及 其 他 UI; 下 面 首先 介绍 游戏 主角 的 实现 。 


与 第 18 章 中 的 主角 相同 ， 这 个 实例 中 主角 也 使 用 单 帧 图 动画 ， 如 图 19-9 所 示 。 


plmovel.png plmove2.png plmovei.png plmove4.png 
51x68 51х68 51x68 51x68 


plmovebo.png plstandl.png plstand2.pnq plstand3.pngqg 


图 19-9 主角 贴图 资源 


在 这 些 图 片 资源 中 ， 从 p1move1.png 到 p1move6.png 均 为 移动 时 的 动画 单 帧 图 ， 这 些 单 帧 图 连续 播放 就 可 以 实现 奔跑 的 动画 效果 。 另 外 p1stand1.png 是 站 立 的 贴图 ， 具 体 的 状态 切换 和 贴图 后 面 会 做 
详细 介绍 ， 首 先 介绍 主角 类 定义 文件 GameHeroObj.h， 见 代码 清单 19-1。 


代码 清单 19-1 主角 的 类 定义 文件 GameHeroObj.h 


class GameHeroobj : public Node 
{ 
private: 

Sprite * bodysp; //. 


int m state; // 0: 
普通 ; 15 
前 移动 ; 2 


: 后 移动 ; -1 

踢 球 或 者 跳跃 

public: 
bool init(); 
static GameHeroCbj *create(); 
void setPosition (Point p); 
const Point & getPosition(); 


void setState (int state); 

void actionEnd(cocos2d::Ref* pSender); / / 
踢 或 者 跳 结束 

void update(float time); 

void jump(); 121 

void kick(); / / 
09) 
}; 


其 中 使 用 bodysp 作 为 指针 指向 主角 的 主体 的 精灵 对 象 ， 同 样 也 使 用 状态 机 ， 另 外 规定 了 主角 的 几 个 动作 ， 包 括 前 进 、 后 退 、 跳 跃 和 踢 球 等 。 


主角 的 创建 比较 简单 ， 见 代码 清单 19-2。 
代码 清单 19-2 ”主角 的 创建 


bool GameHeroObj::init()( 


// 
创建 主角 精灵 
bodysp = Sprite::create ("person/plstandl.png"); 
bodysp-»setScale (2); 
auto bodysize = bodysp-»getContentSize(); 


auto body = PhysicsBody::createBox (Size (bodysize.width * 2, 
bodysize.height * 2),PhysicsMaterial (200,0.8,0.01)); 
bodysp-»setPhysicsBody (Боду); 
bodysp-»setPosition (Point (0,2)); 

this-»addChild (bodysp); 


/ / 

设置 初始 状态 
SetState (0); 
scheduleUpdate (); 
return true; 


首先 是 创建 精灵 ， 然 后 创建 精灵 对 应 的 物理 身体 ， 最 后 绑 定 这 个 身体 ， 并 且 把 主角 的 状态 设置 为 0， 也 就 是 正常 状态 。 关 于 主角 的 状态 切换 见 代 码 清单 19-3。 


代码 清单 19-3 ”主角 的 状态 切换 


void GameHeroObj::setState(int state) 


{ 


if(m state != state) { 
m state — state; 
Animation * animation = Animation::create(); 


if(m state >= 1){ 
animation-»addSpriteFrameWithFile ("person/plmovel.png"); 
animation-»addSpriteFrameWithFile ("person/plmove2.png"); 
animation-»addSpriteFrameWithFile ("person/plmove3.png"); 
animation-»addSpriteFrameWithFile ("person/plmove4.png"); 
animation-»addSpriteFrameWithFile ("person/plmove5.png"); 
animation-»addSpriteFrameWithFile ("person/plmove6.png"); 

}else{ 
animation->addSpriteFrameWithFile ("person/plstandl.png"); 
animation->addSpriteFrameWithFile ("person/plstand2.png"); 
animation->addSpriteFrameWithFile ("person/plstand3.png"); 
animation->addSpriteFrameWithFile ("person/plstand4.png"); 

} 

if (m state > -2){ 
// 

初始 化 动画 
animation-»setDelayPerUnit (0.1f); 
animation-»setRestoreOriginalFrame (true); 
// 
运行 动画 

bodysp-»runAction (CCRepeatForever::create( 


CCAnimate::create (animation))); 


个 游戏 中 ， 主 角 有 四 个 状态 ， 包 括 正常 状态 、 前 进 状态 、 后 退 状态 以 及 特殊 状态 。 这 个 函数 就 起 到 设置 状态 的 作用 。 


设置 状态 整体 上 可 以 分 为 两 步 : 首先 清除 上 一 个 状态 相关 的 内 容 。 是 的 ， 你 无 法 知道 “上 一 个 状态 ”是 什么 的 ， 尤 其 在 复杂 的 游戏 中 ， 主 角 可 能 会 有 几 十 个 状态 。 这 时 有 两 种 处 理 办 法 ， 一 种 是 将 目前 
所 有 和 状态 相关 的 变量 全 部 重 置 一 遍 ; 另 一 种 是 通过 一 个 变量 来 记录 “上 一 个 状态 ”有 具体 是 哪个 ， 然 后 根据 这 个 变量 来 判断 什么 数据 是 需要 清除 的 。 这 往往 在 规模 比较 大 的 游戏 中 采用 ， 这 个 游戏 采用 第 一 
种 方法 。 


然后 来 看 正常 状态 ， 如 图 19-10 所 示 ; 然后 就 是 设置 当前 的 状态 的 相关 内 容 ， 比 如 设置 新 的 动画 和 动作 等 ， 有 时 候 这 两 步 可 以 没有 明显 的 界限 ， 因 为 有 些 变量 值 是 在 两 个 状态 中 都 使 用 的 ， 设 置 新 的 值 
就 等 于 间接 删 了 旧 的 值 。 移 动 状态 如 图 19-11 所 示 。 


图 19-10 正常 状态 


图 19-11 移动 状态 


移动 是 由 update 函 数 设置 的 ， 另 外 jump 和 Kick 函数 分 别 控制 跳跃 和 踢 球 ， 见 代码 清单 19-4。 


代码 清单 19-4 ”主角 逻辑 代码 


void GameHeroObj::update(float time) 
{ 
auto р = bodysp-»getPosition(); 


if(m state == 1)// 
右 移动 
setPosition(Point(p.x + 2,p.y)); 
else if(m state == 2)// 
左 移动 
setPosition(Point(p.x - 2,p.y)); 


} 
void GameHeroObj::jump() 


{ 


if(m state < 0) 

return; 
setState (-1); 
bodysp-»runAction (Sequence: : create (JumpBy: : create (1, 
Point(0,0),100,1), 
CallFuncN::create(CC CALLBACK 1 (GameHeroObj::actionEnd,this)), 
NULL)); 


) 

void GameHeroObj::kick() 

{ 
setState (-1); 
auto p = bodysp-»getPosition(); 
bodysp-»runAction (Sequence: :create( 
MoveTo::create(0.1,Point(p.x + 20,p.y)), 
CallFuncN::create(CC CALLBACK 1 ( 
GameHeroObj: :actionEnd,this)),NULL)); 


敌人 的 逻辑 和 主角 一 致 ， 不 同 的 是 主角 由 操作 控制 ， 政 人 由 程序 控制 行动 。 
19.3.2 ”游戏 主 模块 的 实现 
主 游戏 部 分 的 整合 主要 是 将 主角 、 敌 人 和 球 整 合 在 一 起 ， 首 先 介绍 Ul 部 分 的 创建 和 初始 化 ， 包 括 创 建 游戏 背景 、Ul 修 饰 和 信息 精灵 以 及 按钮 ， 主 游戏 部 分 的 初始 化 函数 initUi 见 代码 清单 19-5。 


代码 清单 19-5 ” 主 游戏 部 分 的 初始 化 


void GameMain::initUi()( 
Size size = Director::getInstance()-»getVisibleSize(); 


Sprite* bg = Sprite::create("BG.png"); 
bg-»setPosition(Point(size.width/2, size.height/2)); 
this-»addChild(bg, 0,1); 
GamePrepare * coverlayer - GamePrepare::create(); 
this-»addChild (coverlayer, 7,2); 

// 
旗帜 

Sprite *iconLeft = Sprite::create("flag 1l.png"); 

iconLeft-»setPosition(Point(size.width / 2 - 80,600)); 
this-»addChild (iconLeft, 6, 6); 
Sprite *iconRight = Sprite::create("flag 2.png"); 
iconRight-»setPosition(Point(size.width / 2 + 80,600)); 
this-»addChild (iconRight, 6,7); 


scoreleft = Sprite::create("0.png"); 

scoreleft-»setScale (0.5); 
scoreleft-»setPosition(Point(size.width / 2 - 80,550)); 
this-»addaChild (scoreleft,0,8); 

Scoreright = Sprite::create("0.png"); 
scoreright-»setScale (0.5); 
Scoreright-»setPosition(Point(size.width / 2 + 80,550)); 
this-»addChild (scoreright, 6,9); 


/ 
修饰 条 


Sprite * centersp Sprite::create ("maincupl.png"); 
centersp-»setScale (0.4); 
centersp-»setPosition(Point(size.width / 2,550)); 
this-»addChild (centersp, 6,10); 

Sprite * leftbar = Sprite::create("skill.png"); 
leftbar-»5setFlippedX (true); 
leftbar-»setPosition(Point(size.width / 4 - 50,600)); 
this-»adaChild (leftbar,0,11); 

Sprite * rightbar = Sprite::create("skill.png"); 
rightbar-»setPosition(Point(size.width / 4 * 3 + 50,600)); 
this-»addChild (rightbar, 6,12); 

// 


按钮 


Button* pausebtn = Button::create(); 
pausebtn-»setTouchEnabled (true); 

pausebtn-»loadTextures ("pausel.png","pause2.png", ""); 
pausebtn-»setPosition(Point(size.width - 50,size.height - 50)); 
pausebtn-»addTouchEventListener (this, 

toucheventselector (GameMain::menuPauseCallback)); 
this-»addChild (pausebtn, 6,3); 

Button* leftbtn - Button::create(); 
leftbtn-»setTouchEnabled (true); 

eftbtn-»setFlippedX (true); 
leftbtn-»loadTextures ("contrall.png","contral2.png", ""); 
leftbtn-»setPosition (Point (80,50)); 
leftbtn-»addTouchEventListener (this, 

toucheventselector (GameMain::menuLeftCallback)); 
this-»addChild (leftbtn, 6,4); 
Button* rightbtn = Button::create(); 
rightbtn-»setTouchEnabled (true); 

rightbtn-»loadTextures ("contrall.png","contral2.png", ""); 
rightbtn-»setPosition (Point (300,50)); 
rightbtn-»addTouchEventListener (this, 
toucheventselector (GameMain: :menuRightCallback)); 
this-»addChild (rightbtn, 6,5); 

Button* jumpbtn = Button::create(); 
umpbtn-»setTouchEnabled (true); 

umpbtn-»loadTextures ("jump.png","", ""); 
umpbtn-»setPosition (Point (600,50)); 
umpbtn-»addTouchEventListener (this, 
ucheventselector (GameMain: :menuJumpCallback)); 
his-»addChild (jumpbtn, 6,4); 

utton* kickbtn - Button::create(); 
kickbtn-»setTouchEnabled (true); 

kickbtn-»loadTextures ("kick.png","", ""); 
kickbtn-»setPosition (Point (800,50)); 
kickbtn-»addTouchEventListener (this, 

toucheventselector (GameMain::menuKickCallback)); 
this-»addChild (kickbtn, 6,5); 
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UI 创建 完成 后 ， 就 是 与 游戏 相关 的 静态 图 的 创建 。 虽然 同样 是 静态 图 ， 但 是 这 些 图 并 不 属于 装饰 也 不 是 具有 显示 比赛 信息 功能 的 UI， 而 是 和 主 游戏 的 逻辑 相关 的 静态 图 ， 所 以 这 部 分 也 单独 分 开 形 成 一 
个 函数 。 


球门 被 拆 成 两 部 分 ， 其 中 rdoor 和 ldoor 是 球门 外 侧 的 球 网 和 门框 ，rdoord 和 ldoord 是 球门 底部 的 门框 ， 如 图 19-12 所 示 。 相 关 代码 见 代 码 清单 19-6。 


-ent 
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Е 


919-12 球门 外 侧 和 内 侧 的 图 


代码 清单 19-6 ”球门 相关 精灵 初始 化 函数 


// 

初始 化 游戏 相关 静态 图 

void GameMain::initGame () { 
Size size = Director::getInstance()-»getVisibleSize(); 
// 

球门 


// 

右 侧 球门 
Sprite* rdoor = Sprite::create ("dooroutside.png"); 
rdoor-»setPosition(Point(size.width - 50,120)); 
this-»addChild (rdoor, 5,20); 


// 
左 侧 球门 

Sprite* ldoor = Sprite::create ("dooroutside.png"); 
ldoor-»setFlippedX (true); 
ldoor-»setPosition (Point (50,120)); 
this-»addChild (1аоог, 5,21); 


// 

右 侧 球门 底 
Sprite* rdoord = Sprite::create ("doorinside.png"); 
rdoord-»5setPosition (Point (size.width - 50,120)); 
this-»addChild (гаоога, 1,22); 


// 
左 侧 球门 底 

Sprite* ldoord = Sprite::create("doorinside.png"); 
ldoord-»setFlippedX (true); 
ldoord-»setPosition (Point (50,120)); 
this-»adaChild (1аоога, 1,23); 
m leftvalue = 0; 
m rightvalue - 0; 


UI 和 静态 图 创建 完成 后 ， 就 是 游戏 的 灵魂 一 主角 和 敌人 的 创建 了 。 之 所 以 把 创建 Ul 和 创建 游戏 对 象 的 逻辑 分 成 两 个 国 数 ， 是 因为 创建 UI 的 逻辑 比较 多 ， 而 且 都 是 重复 的 精灵 和 按钮 对 象 的 创建 ， 为 了 
便于 代码 修改 ， 把 游戏 对 象 的 创建 逻辑 分 离 出 来 ，startGame 见 代码 清单 19-7。 


代码 清单 19-7 ”游戏 对 象 的 创建 逻辑 


// 
创建 足球 和 主角 
void GameMain: :startGame () { 
SetPause (false); 
Size size = Director::getInstance()-»getVisibleSize(); 


创建 足球 
ball = Sprite: 
ball-»setTag (1); 
auto body - 


PhysicsBody: :createCircle (ba] 


:create ("vs ball 


.png"); 


l-»getContentSize().width / 2, 


PhysicsMaterial(0.] 
Ба] 
Ба] 


l-»set 


„7,0. 


—»setPhysicsBody (body) ; 


01)); 


this-»adaChild (ball); 


创建 主角 


hero = 


GameHeroObj : 


tPosition (Point (size.width/2,400)); 


:create(); 


hero-»setPosition (Point (200,200)); 


this-»addChild (hero); 


// 
创建 敌人 


enemy = GameEnemyObj: 


:create(); 


enemy-»setPosition (Point (800,200)); 
this-»addChild (enemy); 


游戏 的 逻辑 函数 update 里 ， 首 先 需 要 判断 球 是 否 


置 关系 决定 前 进 和 后 退 


出 界 或 者 进 球 ， 如 果 一 方 进 球 超过 三 个 则 比赛 结 


退 。update 函 数 见 代码 清单 19-8。 


代码 清单 19-8 ”游戏 的 逻辑 国 数 update 


void GameMain::update( 


{ 


if (m ispause) 


return; 
YY 
判断 结束 
if(m leftvalue >= 
Director::getI 
return; 


Iis 


3) { 


nstance( 


f(m rightvalue >= 3) { 


float time) 


) -"replaceScene (GameResult::scene (0) ) ; 


nstance( 


:getI 


Director: :getI 
return; 

} 

// 

判断 得 分 出 界 

Size size = Director: 

if (ball == NULL) 
return; 

2s ballpos 


кий, житу 


= ball-»getPosit 


) ->replaceScene (GameResult::scene(1)); 


nstance () ->getVisibleSize(); 


ion(); 


lpos.x » size.width and 
lpos.y » size.height) 


f(ballpos.x « 70 and ballpos.y > 25 and ballpos.y « 200){ 
eftvalue,0); 


if(ballpos.x > size.width - 70 and ballpos.y > 25 and ballpos.y « 200){ 


if(ballpos.x « 0 and bal 
ballpos.y « 0 and bal 
startBall(); 
return; 
} 
// 
我 方 得 分 
1 
setScore (++m 1 
startBall(); 
return; 
} 
// 
我 方 得 分 
1 
setScore (++т rightvalue,0); 
startBall(); 
return; 
} 
// 
敌人 


auto enemypos = 


: 


1 
enemy-»setSta 
前 进 
је1ѕе if (enemypos 
enemy-»setSta 
后 退 
je 
enemy->jump () 


如 果 游 戏 结束 则 调用 结果 界面 ， 并 把 获胜 方 传 给 这 个 界面 ， 


enemy-»getPosition(); 
f(ballpos.x - enemypos.x > 200){ 
te (2) 


.X - ballpos.x > 300){ 
се(1);// 


lse if(ballpos.y - enemypos.y > 200){ 
HL 


由 这 个 界面 负责 显示 和 处 理 下 一 步 操 作 ， 


否则 重新 发 球 ; 其 


见 代码 清单 19-9。 


Hyr 
其 次 是 


敌人 的 行为 逻辑 ， 这 部 分 主要 通 


甬 过 人 和 球 的 位 置 关系 来 判断 ， 


根据 与 球 的 位 


代码 清单 19-9 ”结果 界面 
bool GameResult::init( 
{ 
if ( !Layer::init( 
return false; 
} 
Size size = Direct 
/ / 
菜单 背景 
Sprite* bg = Sprit 


bg->setPosition (Point (size.width/2, 


or::getIl 


nstance ()-»getVisibleSize(); 


e::create("bg jiesuan.png"); 


size.height/2)); 


this-»addChild (bg, 
// 

к 

重新 开始 


0,0); 


Button* startbtn = 
tartbtn-»se 
tartbtn-»loadText 
tartbtn-»setPosit 


tTouchl 


Button: 
Enabled( 
ures ("ne 


ion (Point 


:create(); 

true); 

xtbtnl.png", "nextbtn2.png", 
(size.width/2,270)); 


WW H 


S 
S 
S 
S 


tartb 


tn-»addTouchl 


Eventlis 


tener (this, 


toucheventselector 


this-»addChil 


(GameRes 


ult::menuNextCallback)); 


d(startbtn,1,1); 


tinueb 


Ln-»se 


Button* continuebtn - 
cTouchE 


Button: 


Enabled (t 


:create(); 
true); 


tinuebtn-»loadTextures ("trybtnl.png", "", ""); 
tinuebtn-»setPosition (Point (size. widths, 160)); 
continuebtn-»addTouchEventListener (this, 
toucheventselector (GameResult::menuContinueCallback)); 
this-»addChild (continuebtn,1,2); 


// 


关于 


Button* aboutbtn = Button::create(); 
aboutbtn-»setTouchEnabled (true); 
aboutbtn-»loadTextures ("quitbtnl.png", "quitbtn2.png", 
aboutbtn-»setPosition(Point(size.width / 2,50)); 
aboutbtn-»addTouchEventListener (this, 


WW) H 


toucheventselector (GameResult::menuQuitCallback)); 
this-»adaChild (aboutbtn,1,2); 


3 
E 


Layer * titleNode = Layer::create(); 
titleNode-»ignoreAnchorPointForPosition (false); 
titleNode-»setContentSize (Size (400,200)); 
titleNode-»setPosition(Point(size.width / 2,size.height / 4 * 3)); 
this-»adaChild (titleNode, 1,5); 
Sprite *title = Sprite::create ("gameover.png"); 
title-»setPosition (Point (200,200)); 
titleNode-»addChild (title,0,1); 

/ / 
旗帜 


// 

左 侧 
Sprite *iconLeft = Sprite::create("flag 1.png"); 
iconLeft-»setScale (2); 
iconLeft-»setPosition(Point(size.width / 4 - 100,350)); 
this-»adaChild (iconLeft,1,9); 


// 

右 侧 
Sprite *iconRight = Sprite::create("flag 2.png"); 
iconRight-»setScale (2); 
iconRight-»setPosition(Point(size.width / 4 * 3 + 100,350)); 
this-»addChild (iconRight,1,7); 
return true; 


} 


void GameResult::setResult(int result){ 


// 

结果 
Size size = Director::getInstance()-»getVisibleSize(); 
Sprite *resultLeft = Sprite::create ("win.png"); 
this-»addChild (resultleft,1,8); 
Sprite *resultRight = Sprite::create("lose.png"); 
this-»addChild (resultRight,1,9); 


if(result == 0){ 
resultLeft-»setPosition(Point(size.width / 4 - 100,500)); 
resultRight-»setPosition (Point(size.width / 4 * 3 + 100,500)); 
}else{ 
resultLeft->setPosition (Point (size.width / 4 * 3 + 100,500)); 


resultRight->setPosition (Point(size.width / 4 - 100,500)); 


结束 界面 显示 如 图 19-13 所 示 。 
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图 19-13 ”游戏 结束 


19.3.3 ”游戏 主 菜单 的 实现 


主 菜单 的 初始 化 与 第 18 章 的 类 似 ， 也 是 横 屏 ， 需 要 修改 一 些 布局 和 贴图 ， 见 代码 清单 19-10。 


代码 清单 19-10” 主 菜单 初始 化 


bool GameMainMenu::init() 


{ 


f ( !Layer::init() ) 


ex. ils. 


return false; 


} 


Size size = Director::getInstance()-»getVisibleSize(); 


NM 

菜单 背景 
Sprite* bg = Sprite::create ("bgmain.png"); 
bg-»setPosition(Point(size.width/2, size.height/2)); 
this-»addChild (bg,0,0); 


// 

相关 按钮 
// 

开始 


Button* startbtn = Button::create(); 
startbtn-»setTouchEnabled (true); 
S 
S 


tartbtn-»loadTextures ("startbtnl.png", "startbtn2.png", ""); 
tartbtn-»setPosition (Point (size.width / 2,320)); 


startbtn-»addTouchEventLlistener (this, 
toucheventselector (GameMainMenu: :menuNewGameCallback)); 
this-»addChild (startbtn,1,1); 

/ / 

继续 游戏 

Button* continuebtn = Button::create(); 
continuebtn-»setTouchEnabled (true); 
continuebtn-»loadTextures ("restartbtnl.png", 
"restartbtn2.png", ""); 
continuebtn-»setPosition (Point (size.width / 2,220)); 
continuebtn-»addTouchEventListener (this, 
toucheventselector (GameMainMenu: :menuContinueCallback)); 
this-»addaChild (continuebtn,1,2); 


进入 关于 
Button* aboutbtn = Button::create(); 
aboutbtn-»setTouchEnabled (true); 

aboutbtn-»loadTextures ("aboutbtnl.png", "aboutbtn2.png", ""); 
aboutbtn-»setPosition(Point(size.width / 2,120)); 
aboutbtn-»addTouchEventListener (this, 
toucheventselector (GameMainMenu: :menuAboutCallback)); 
this-»adaChild (aboutbtn,1,2); 


/ / 
设置 声音 按钮 
Button* soundbtn = Button::create(); 
soundbtn-»setTouchEnabled (true); 
soundbtn-»loadTextures ("sound.png","", ""); 
soundbtn-»setPosition (Point (100,600)); 
soundbtn-»addTouchEventLlistener (this, 
toucheventselector (GameMainMenu: : :menuSoundaCallback)); 
this-»adaChild (soundbtn,1,3); 


// 
声音 按钮 又 
m soundflag = Sprite::create("x.png"); 
m soundflag-»setPosition (Point (100, 600)); 
this-»addChild (m soundflag,l,4); 
m soundflag-»setVisible (false); 


// 

标题 
Layer * titleNode = Layer::create(); 
titleNode-»ignoreAnchorPointForPosition (false); 
titleNode-»setContentSize (Size(400,200)); 
titleNode-»setPosition(Point(size.width / 2,size.height / 4 * 3)); 
this-»addChild (titleNode,1,5); 

Sprite *cup = Sprite::create ("maincupl.png"); 
cup-»setPosition (Point (200,150)); 
titleNode-»addChild (cup, 0,2); 

Sprite *title = Sprite::create ("name.png"); 
title-»setPosition (Point (200,100)); 
titleNode-»addChild (title,0,1); 

issound - true; 

zy 

初始 化 声音 
// 

预 加 载 
SimpleAudioEngine::getInstance()-»preloadBackgroundMusic ( 
"background.mp3" ); 

// 

设置 音量 
SimpleAudioEngine::getInstance()-»setBackgroundMusicVolume (0.5); 
/ / 

EK 
SimpleAudioEngine::getInstance()-»playBackgroundMusic ( 


"background.mp3", true); 
return true; 


T 


这 个 项 目 在 切换 界面 时 采用 3.3.3 节 介绍 的 场景 切换 效果 ， 效 果 如 图 19-14 所 示 。 


图 19-14 ”场景 切换 效果 


实现 这 个 效果 的 代码 见 代码 清单 19-11。 


代码 清单 19-11 场景 切换 效果 实现 代码 


void GameMainMenu: :menuNewGameCallback (Ref *pSender, 
TouchEventType type) 


if (type == TOUCH EVENT ENDED) { 
Director::getInstance()-»setDepthTest (true); 


// 
切换 场景 

Director::getInstance () ->гер1асеЅсепе ( 

TransitionPageTurn::create(0.5,GameMain::scene(), false)); 


另外 ， 被 切换 的 场景 要 实现 onEnterTransitionDidFinish 和 onExitTransitionDidSstart 函 数 。onEnterTransitionDidFinish 函 数 在 进入 这 个 界面 的 动画 运行 完 以 后 被 调用 ， 而 onExitTransition-DidStart 


函数 则 在 离开 这 个 界面 的 动画 运行 完 以 后 被 调用 ， 见 代码 清单 19-12。 


代码 清单 19-12  onExitTransitionDidStart&gZif[JonEnterTransitionDidFinish AAIE 


void GameMainMenu::onEnterTransitionDidFinish() 


{ 
} m 


void GameMainMenu::onExitTransitionDidStart () 
{ 
Layer::onExitTransitionDidStart (); 


} 


Layer::onEnterTransitionDidFinish(); 


19.34 ”关于 界面 的 实现 


和 主 菜单 界面 一 样 ， 关 于 界面 的 功能 就 是 显示 开发 者 相关 信息 ， 一 般 是 文字 ， 有 些 游戏 还 会 加 上 开发 团队 名 单 。 这 个 游戏 实例 的 关于 界面 设计 以 及 初始 化 函数 和 18 章 的 类 似 ， 首 先是 创建 背景 精灵 ， 
后 是 创建 文字 和 文字 框 ， 见 代码 清单 19-13。 


代码 清单 19-13 ”关于 初始 化 


// 

关于 界面 初始 化 函数 

bool GameAbout::init() 
{ 


if ( !Layer::init() ) 


return false; 


} 


// 
获得 屏幕 尺寸 
Size size = Director::getInstance()-»getVisibleSize(); 
// 
创建 背景 
Sprite* bg = Sprite::create ("bgmain.png"); 


bg-»setPosition (Point (size.width/2, size.height/2) ); 
this-»addChild(bg, 0,0); 

// 

关于 框 
Sprite*kuang = Sprite::create("bg p.png"); 
kuang-»setRotation (90); 
kuang-»5setPosition (Point (size.width/2, size.height/2)); 
this-»addChild (kuang,2,2); 


// 
文字 信息 
char 1пЁ[256]; 
sprintf (inf,"name:mini worldcup\n\nprogram: shuoquan man\n\nart 
design:peng xu\n\ncompany:hz books\n\n powered by cocos2D-X"); 


创建 标签 显示 文字 
LabelTTF * myjineng = LabelTTF::create (inf,"Marker 
Felt",40,Size(400,400),TextHAlignment::LEFT); 
myjineng-»setAnchorPoint (Point (0,1)); 
myjineng-»setColor (Color3B(0,0,0)); 
myjineng-»setPosition (Point (300,500)); 
this-»addChild (myjineng); 


Button* backbtn = Button::create(); 
backbtn-»setTouchEnabled (true); 

backbtn-»loadTextures ("contrall.png","contral2.png", ""); 
backbtn-»setPosition(Point(size.width - 100,size.height - 100)); 
backbtn-»addTouchEventListener (this, 
toucheventselector (GameAbout: :menuBackCallback)); 
this-»adaChild (backbtn,2,3); 

return true; 


这 个 界面 采用 了 翻 页 的 界面 切换 方式 ， 使 用 背景 和 首页 相同 ， 如 图 19-15 所 示 。 


图 19-15 ”关于 界面 切换 方式 


194 ”本草 小 结 


本 章 介绍 了 简单 物理 体育 游戏 的 实现 过 程 。 采 用 Cocos2D-X 的 C++ 开 发 ， 并 且 使 用 Box2D 物 理 引 擎 ， 可 以 自己 实现 相关 的 功能 并 进一步 修改 。 下 一 章 介 绍 使 用 Lua 脚 本 实现 的 游戏 实例 一 一 天 天 消 豆 


Z. 


P20 HRP: 天 天 消 豆 豆 


前 面 分 别 使 用 JavaScript、C++ 以 及 物理 引擎 进行 了 开发 ， 本 章 使 用 Lua 脚 本 引擎 ， 模 仿 微 信 游 戏 中 大 红 大 紫 的 游戏 天 天 爱 消除 ， 进 行 消除 游戏 的 开发 。 


20.1 ”消除 游戏 的 特点 


消除 游戏 是 休闲 游戏 的 一 种 ， 以 简单 快速 消除 为 主 。 在 移动 端 游戏 中 ， 消 除 游戏 占据 很 重要 的 位 置 。 一 些 简单 的 休闲 单机 游戏 ， 著 名 网 游 智 龙 迷城 等 游戏 的 核心 玩法 ， 均 采用 消除 游戏 ， 微 信 发 布 的 第 
一 款 连接 微 信 的 游戏 “天 天 爱 消除 ”， 其 短小 精 悍 ， 是 一 种 比较 适合 移动 端的 游戏 类 型 。 图 20-1 为 移动 端 经 典 消除 游戏 《小 鸟 爆破 》 的 游戏 截图 。 
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E204 《小 乌 爆 破 》 游 戏 截图 


本 游戏 模仿 天 天 爱 消 除 ， 主 角 如 图 20-2 所 示 ， 不 同 的 表情 代表 了 图 块 的 不 同 状态 ， 比 如 选中 模块 后 小 动物 的 眼睛 睁 开 了 。 


图 20-2 ”小 图 块 


(1) 天 天 消 豆 豆 的 游戏 规则 

天 天 消 豆 豆 的 游戏 规则 是 ， 用 手指 拖 动 交换 相 邻 的 两 个 图 块 ， 如 果 移 动 后 同一 列 ， 或 者 是 同一 行 有 三 个 以 上 相同 的 色 块 时 ， 这 些 色 块 消除 ， 从 上 方 会 补 进 新 的 色 块 ， 本 章 就 实现 这 个 功能 。 
(2) 天 天 消 豆 豆 游戏 框架 和 界面 

界面 和 流程 较 简单 ， 包 括 开始 界面 和 游戏 主场 景 等 界面 。 开 始 界面 是 游戏 启动 后 的 欢迎 界面 ， 如 图 20-3 所 示 。 


游戏 中 界面 如 图 20-4 所 示 。 
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图 20-4 ”游戏 中 界面 


203 ”天 天 消 豆 豆 的 实现 
下 面 就 来 介绍 天 天 消 豆 豆 的 实现 。 
20.3.1 “Lua 游 戏 框架 实现 


本 书 的 第 11 章 介绍 了 Lua 绑 定 ， 其 中 重点 提示 过 ， 使 用 脚本 开发 有 一 个 很 大 的 弊病 就 是 如 果 稍 不 注意 ， 代 码 就 会 比较 混乱 ， 写 法 也 会 比较 多 。 相 对 于 C+ + ，Lua 是 一 个 比较 灵活 的 语言 ， 实 现 同一 功能 
的 方法 会 比较 多 ， 所 以 一 个 好 的 游戏 框架 和 代码 规范 就 格外 重要 ， 对 于 多 人 开发 和 维护 的 大 型 项 目 来 说 就 更 加 重要 了 。 本 项 目的 Lua 框 架 如 图 20-5 所 示 。 


Y src 


Y const 


const.lua 
lang.lua 


"Y game 


gameLayer.lua 


йаш ayer.lua 


qameLodgic 


gamecGrid.lua 


gameoObj.lua 


gridLogic.lua 


main.lua 


图 20-5 项 目的 Lua 框 架 


其 中 main.lua 为 启动 文件 ， 是 这 个 程序 的 入 口 ， 同 时 也 负责 捕捉 并 打印 程序 的 报错 ， 见 代码 清单 20-1。 


代码 清单 20-1 程序 入 口 


错误 捕捉 函数 

function G TRACKBACK (msg) 
print("--- —— 
prin 
prin 
prin 

end 


入 口 函数 
local function main() 


内 存 回 收 
collectgarbage ("setpause", 100) 
collectgarbage ("setstepmul", 5000) 
require ("src/const/const.lua") 


随机 数 种 子 


math.randomseed (math.random(os.time())) 


ct ct ctr ct 


debug.traceback()) 


( 
("LUA ERROR: " http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/.. tostring (msg) http://www.hzcourse.com/resourc 
( 
( 


文字 

HZ LANG = require ("src/const/lang.lua") 
显示 层 和 场景 

HZ GAME LAYER = cc.Layer:create() 


local 5 = cc.Scene:create () 
HZ SHOV _ LAYER (HZ START) 
Scene: ЕЕ САМЕ ‚ LAYER) 
cc.Director:getInstance ():runWithScene (scene) 


end 
xpcall(main, | С TRACKBACK ) 


调用 xpcall 并 传 入 入 口 函 数 和 捕捉 报错 函数 来 开始 程序 ， 其 实 直接 调用 main 函 数 也 是 可 以 的 ， 如 果 那 样 ， 所 有 Lua 层 的 报错 我 们 是 无 法 看 到 任何 提示 的 ， 会 给 调试 造成 困难 。 
在 ”_G_TRACKBACK_” 函 数 中 调用 debug.traceback() 递归 地 获得 报错 提示 ， 并 把 它们 打印 出 来 ; main 函 数 中 进行 游戏 初始 化 的 内 容 ， 比 如 创建 场景 ， 这 个 项 目 中 采取 单 场 景 的 方式 ， 通 过 布景 层 的 
更 换 来 蔡 换 界面 ， 另 外 通过 全 局 方法 来 管理 布景 层 之 间 的 切换 ， 这 些 管 理 函 数 也 在 main 中 定义 ， 见 代码 清单 20-2。 


代码 清单 20-2 ”界面 相关 全 局 函数 定义 


HZ START = "startLayer" 

HZ GAME = "gameLayer" 

local uiTable = {} 

uiTable["startLayer"] = require ("src/game/startLayer.lua") 
uiTable["gameLayer"] = require ("src/game/gameLayer.lua") 


清空 当前 界面 
function HZ CLEAN LAYER() 

HZ GAME LAYER:removeAllChildren (true) 
end 


显示 当前 层 
function HZ SHOW UI LAYER (name) 

HZ CLEAN LAYER() 

HZ GAME LAYER:addChild (uiTable [name] .show () ) 
end 


获得 图 片 完整 路 径 
function HZ GETRESOURCE (name) 

return "res/imgs/"http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/14889/OEBPS/Text/..name 
end 


需要 注意 的 是 ， 昌 然 Lua 并 没有 这 样 的 规定 ， 全 局 函数 的 命名 最 好 遵循 一 定 规范 ， 首 先 采 用 大 写字 母 。 最 好 使 用 前 缀 ， 比 如 本 实例 里 采用 “华章 ”的 缩写 “HZ” 作 为 前 缀 ， 避 免 污染 公共 接口 ， 显 示 哪 
个 层 ， 就 调用 哪个 层 的 show 函 数 来 显示 ， 首 先 清除 当前 的 层 。 另 外 HZ_GETRESOURCE 获 得 图 片 ， 为 图 片 名 称 加 上 路 径 


const 文 件 夹 中 放 一 些 全 局 常量 的 文件 ， 昌 然 Lua 中 并 没有 常量 这 个 概念 ， 可 以 通过 一 个 单独 的 文件 把 这 个 文件 中 的 量 都 当做 常量 来 看 待 ， 这 个 文件 夹 中 有 两 个 文件 ，const.Iua 中 是 游戏 内 容 相关 的 常 
量 ， 比 如 游戏 界面 中 图 块 的 行列 数 等 ， 这 些 变量 单独 提出 来 可 以 方便 修改 ， 见 代码 清单 20-3， 


代码 清单 20-3 ”游戏 中 的 常量 


方块 的 状 

HZ CUBE TYPE NORMAL 
B 
B 
B 


HZ CUBE ' 
HZ CUBE ' 
HZ CUBE ' 


方块 数量 
HZ CUBE 


A Ww ND DS 


行列 数量 
HZBoardSizeX = 7 
HZBoardSizeY - 7 
HZChoselconIndex = 21 


标签 


HZ NORMAL TAG = 10 
HZ MATCH TAG - 30 
HZ SELECT TAG - 40 


起 始点 
HZ GRID OFFSET X 
HZ GRID OFFSET Y 


格 的 宽度 
HZ GRID WIDTH = 90 


100 


Lang.lua 负 责 放 置 游戏 中 的 文字 ， 这 样 做 的 好 处 是 方便 不 同 语言 版 本 的 替换 ， 只 需 替 换 这 一 个 文件 就 可 以 了 ， 见 代码 清单 20-4。 


代码 清单 20-4 ”游戏 中 的 文字 


module (http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14889/0EBPS/Text/..., package.seeall) 
LangDic = {} 

LangDic["pressScreen"] = " 

点 击 屏幕 开始 " 

LangDic["title"] = " 

爱 消 除 " 


function stringFormDic (key) 


if LangDic[key] == nil then 
return ""; 

else 
return LangDic[key]; 

end 


如 果 想 获得 文字 ， 可 以 直接 调用 stringFormDic 并 传 入 文字 的 “ 键 值 ”就 可 以 了 ， 比 如 想 获 得 “ 爱 消 除 ”， 直 接 传 入 title 就 可 以 了 。 
game 文 件 夹 中 是 UI 模块 文件 ，gameLogic 文 件 夹 中 是 主 游戏 的 逻辑 文件 。 
20.3.2 ”开始 界面 模块 的 实现 
UI 模块 在 game 文 件 夹 中 ， 开 始 界面 模块 就 是 其 中 的 startLayer.lua， 调 用 show 浮 数 开始 界面 逻辑 ， 其 中 包括 背景 的 创建 以 及 触摸 事件 的 处 理 。show 遂 数 见 代 码 清单 20-5。 


代码 清单 20-5”show 函 数 


显示 
show = function() 
local rootLayer = cc.Layer:create() 
fillUi (rootLayer) 
触摸 事件 注册 函数 
local function onTouch(eventType, x, y) 
if eventType "began" then 


HZ SHOW UI LAYER(HZ GAME 
return true 


— 


end 
end 


注册 触摸 事件 函数 
rootLayer:registerScriptTouchHandler (onTouch) 
允许 触摸 


rootLayer:setTouchEnabled (true) 


播放 声音 
AudioEngine.playMusic ("res/bgm game.wav", true) 
return rootLayer 


end 
frshowBegZ&rR8lssxc FEREBAT RrootLayer, НЕКЕ, XE—HPE BER IBIAE B VSIFHSS— ^ S FHERERfIIUI, Di URBS SR20-6, 


代码 清单 20-6 АВО 


填充 UI 
local fillUi = function (rootLayer) 


创建 背景 
local splashSp = cc.Sprite:create( 
HZ GETRESOURCE ("splash bg.png")) 


Bg 


设置 位 


splashSp:setPosition (visibleSize.width / 2, 
splashSp:getContentSize().height / 2) 
rootLayer:addChild (splashSp) 
创建 内 动 的 小 圆 点 


左边 的 


local eyeSpl = createShiningSprite () 
eyeSpl:setPosition(visibleSize.width / 2 - 80, 
visibleSize.height / 2 + 180) 
rootLayer:addChild (eyeSpl) 


local eyeSp2 = createShiningSprite () 
eyeSp2:setPosition(visibleSize.width / 2 + 80, 
visibleSize.height / 2 + 180) 
rootLayer:addChild (eyeSp2) 


创建 标题 加 入 父 节点 中 
rootLayer:addChild (createTipLabel ()) 
rootLayer:addChild (createTitleLabel ()) 


end 
这 个 函数 中 首先 创建 底 图 的 精灵 ， 然 后 分 别 创建 上 层 的 文字 和 修饰 的 闪 动 眼睛 ， 这 些 函 数 见 代 码 清 单 20-7。 


代码 清单 20-7 ”创建 界面 上 的 UI 函 数 


眼睛 动画 显示 


local function createShiningSprite () 


local eyeSp = cc.Sprite:create (HZ GETRESCURCE ("eye.png")) 
// 

缩放 
local scalel = cc.ScaleTo:create(0.1, 2, 0.4) 
local scale2 = cc.ScaleTo:create(0.1, 2, 2) 
local delay = cc.DelayTime:create (2) 
local sequence = cc.Sequence:create (scalel,scale2,delay) 
local repeatFunc = cc.RepeatForever:create (sequence) 
eyeSp: runAction (repeatFunc) 
return eyeSp 

end 


创建 好 背景 底 图 以 及 其 他 静态 精灵 之 后 ， 就 可 以 为 界面 加 上 各 种 文字 标签 ， 标 签 的 创建 方法 和 使 用 C+ + 时 类 似 ， 为 了 使 游戏 更 加 生动 ， 也 需要 为 文字 添加 动态 效果 。 创 建 标题 文字 的 函数 
createTitleLabel 和 创建 提示 文字 的 函数 createTipLabel 见 代码 清单 20-8。 


代码 清单 20-8 ”创建 文字 相关 函数 


标题 文字 
local function createTitleLabel () 
local titLabel = cc.LabelTTF:create( 
HZ LANG.stringFormDic("title"), "Arial", 50) 


titLabel:setColor(cc.c3b(255, 0, 0)) 
titLabel:setOpacity (0) 


文字 淡 入 淡出 效果 


ocal fadel = cc.FadeIn:create (0.5) 
local fade2 = cc.FadeOut:create (0.5) 
动作 序列 
local sequence = cc.Sequence:create (fadel, fade2) 
重复 动作 
local repeatFunc = cc.RepeatForever:create (sequence) 
titLabel:runAction (repeatFunc) 
设置 标题 位 置 
titLabel:setPosition(visibleSize.width / 2, 
visibleSize.height - 400) 
return titLabel 
end 
提示 文字 
local function createTipLabel () 


local tipLabel = cc.LabelTTF:create( 
HZ LANG.stringFormDic ("pressScreen"), "Arial", 30) 


弹出 时 缩放 动作 


ocal scalel = cc.ScaleTo:create(1.5, 1.2) 
local scale2 = cc.ScaleTo:create(1.5, 1) 
动作 序列 
local sequence = cc.Sequence:create (scalel, ѕса1е2) 
重复 缩放 
local repeatFunc = cc.RepeatForever:create (sequence) 
tipLabel:runAction (repeatFunc) 
设置 位 置 
tipLabel:setPosition(visibleSize.width / 2, 130) 


return tipLabel 


end 


这 些 函 数 中 创建 相关 的 图 片 或 者 文字 ， 并 且 为 它们 加 上 动画 ，createTitleLabel 中 使 用 淡 入 淡出 效果 ，createTipLabel 中 使 用 缩放 效果 。 启 动 界面 效果 如 图 20-6 所 示 。 


бею 


图 20-6 ”启动 界面 
20.3.3 ”游戏 主 逻辑 的 实现 


游戏 的 主场 景 主要 包括 如 下 几 个 部 分 ， 首 先是 界面 显示 相关 的 ， 这 些 函 数 和 启动 界面 的 类 似 ， 放 到 gameLayer.lua 中 ， 另 外 注册 的 触摸 函数 也 放 到 这 个 函数 里 ， 其 余 的 逻辑 都 放 在 gameLogic 文 件 夹 下 


的 浮 数 里 ， 其 中 gameObj.lua 文 件 是 小 图 块 逻 辑 ，gameGrid.lua 是 整个 棋盘 的 逻辑 ，gridLogic.lua 进 行 坐 标 与 小 图 块 在 整个 棋盘 上 的 索引 的 坐标 转换 ， 不 过 和 开始 界面 一 样 ， 界 面 的 起 点 也 是 show 消 数 ， 
见 代码 清单 20-9。 


代码 清单 20-9” 主 游戏 界面 show 遂 数 


显示 
show = function() 
m rootLayer = cc.Layer:create|() 


填充 UI 

fillUi (m rootLayer) 

触摸 函数 

local function onTouch(eventType, x, у) 

if eventType == "began" then 

return onTouchBegan(x, y) 

elseif eventType == "moved" then 

return onTouchMoved (x, y) 

elseif eventType == "ended" then 
return onTouchEnded(x, y) 

end 


end 


注册 触摸 事件 
m rootLayer:registerScriptTouchHandler (onTouch) 
m rootLayer:setTouchEnabled (true) 
return m rootLayer 

end 


与 开始 界面 相同 ， 这 个 界面 也 会 创建 一 个 父 节点 布景 层 m_rootLayer， 不 同 的 是 ， 这 里 的 触摸 处 理 分 为 “开始 ”， “移动 ” 和 “结束 ”三 点 ， 因 为 主 游戏 的 界面 比较 复杂 。 有 具体 Ul 的 创建 还 是 在 filUi 中 
进行 ， 见 代码 清单 20-10。 


代码 清单 20-10 ”填充 UI 函 数 


填充 UI 


local fillUi = function (rootLayer) 


创建 背景 
local bgSp = cc.Sprite:create (HZ GETRESOURCE ("game bg.png")) 
bgSp: setScale (2) 
bgSp:setPosition((bgSp:getContentSize().width / 2, 
bgSp:getContentSize().height / 2]) 
rootLayer:addChild (bgSp) 


初始 化 棋盘 数据 
关卡 数据 


m gameGrid.initGrid () 


载 入 图 片 
cc.SpriteFrameCache:getInstance(): 
addSpriteFrames (HZ GETRESOURCE ("GameIcon.plist")) 


生成 关卡 


m gameGrid.initGameGridData () 


显示 


initGameGridShow() 
end 


这 里 发 现 了 文件 的 局 部 变量 m_gameGrid， 它 就 是 gameGrid.Iua 的 文件 句柄 ， 这 个 句柄 的 获得 见 代 码 清单 20-11。 


代码 清单 20-11 ”获得 子 逻 辑 文件 句柄 


local m gameGrid = require ("src/gameLogic/gameGrid.lua")-- 
BEES 7 


ocal m gameObj — require ("src/gameLogic/gameObj.lua") -- 


格子 
local m gridLogic = require ("src/gameLogic/gridLogic.lua") -- 


逻辑 


这 样 处 理 也 是 方便 我 们 在 维护 的 过 程 中 找到 相应 的 方法 。 在 filUi 中 调用 gameGrid 的 initGrid 初 始 化 数组 ， 进 一 步调 用 initGameGridData 生 成 方块 数据 ， 这 两 个 函数 见 代 码 清单 20-12。 


代码 清单 20-12 ”初始 化 数组 并 且 进 一 步 生成 数据 


module (http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/14889/0EBPS/Text/..., package.seeall) 
m gameGridData = (] 


初始 化 棋盘 
initGrid = function() 
for i = 1, HZBoardSizeX do 
m gameGridData[i] = {} 
for j = 1, HZBoardSizeY do 
m gameGridData[i][j] = 0 
end 
end 
end 
生成 数据 
initGameGridData = function() 
for x - 1, HZBoardSizeX do 
for y = 1, HZBoardSizeY do 
local value 
repeat 
value - math.random(1,HZ CUBE COUNT) 
until isThreeGrid(x,y,value) -- false 
判断 没有 可 以 消除 的 
m gameGridData[x][y] = value 
end 
end 
end 


initGrid 函 数 声明 棋盘 格 数据 数组 并 把 数组 全 都 初始 化 为 0，initGameGridData 生 成 棋盘 数据 并 调用 isThreeGrid 判 断 是 不 是 会 被 消除 ， 这 是 为 了 保证 生成 的 棋盘 上 的 格子 不 会 在 开始 时 被 消除 。 


生成 数据 后 ， 进 一 步 在 布景 层 中 显示 数据 。 首 先 把 数据 转换 为 需要 显示 的 格子 ， 然 后 就 是 让 格子 有 序 地 在 棋盘 上 显示 ， 把 数据 转换 为 需要 显示 的 格子 的 函数 createNodeByGrid， 见 代码 清单 20-13。 


代码 清单 20-13 ”显示 方块 数据 


显示 格子 

local function createNodeByGrid (x, y) 

local iconNode = m gameObj.createlconById( 
m gameGrid.getGridDataByIndex (x, y)) 
iconNode:setTag(m grid start tag + 
m gridLogic.revertIndexToTag (x, y) ) 
iconNode:setPosition (m gridLogic.getGridPoint (x, y)) 
return iconNode 

end 


у 


通过 createlconByld 获 得 一 系列 精灵 节点 ， 并 为 这 个 节点 设置 标签 ， 这 是 为 了 在 运算 消除 等 逻辑 时 可 以 获得 与 消除 行列 相对 应 的 精灵 节点 ，initGameGridShow 遂 数 调用 createNodeByGrid 遂 数 ， 并 
把 获得 的 格子 节点 在 棋盘 上 显示 。 


填充 棋盘 显示 
loca] function initGameGridShow () 
for x = 1, HZBoardSizeX do 
for y = 1, HZBoardSizeY do 
local iconNode = createNodeByGrid (x, y) 
m rootLayer:addChild (iconNode) 
end 
end 


end 


实际 创建 方块 格子 节点 的 函数 在 gameObj 中 的 createlconByld 中 ， 这 里 根据 方块 的 数据 获得 相应 节点 的 图 片 名 称 ， 包 括 三 个 图 片 ， 分 别 对 应 可 消除 状态 、 被 选中 状态 和 一 般 状 态 。 见 代码 清单 20-14。 


代码 清单 20-14 ”创建 图 块 节点 


创建 Node 
function createIconById (id) 
local rootNode = CCNode:create() 


可 消除 状态 
ocal matchSp = getGamelcon(HZ CUBE TYPE MATCH, id) 
matchSp:setTag (HZ MATCH TAG) 

rootNode:addChild (matchSp) 


被 选中 状态 
local selectSp = getGamelcon(HZ CUBE TYPE SELECT, id) 
selectSp:setTag(HZ SELECT ТАС) 
rootNode:addChild (selectSp) 

一 般 状 态 
local normalSp = getGameIcon(HZ CUBE TYPE NORMAL, id) 
normalSp:setTag (HZ NORMAL ТАС) 
rootNode:addChild (normalSp) 
return rootNode 


end 


里 分 成 即将 消除 状态 、 选 中 状态 和 普通 状态 ， 三 张 图片 同 时 生成 并 且 互 相 庶 挡 ， 然 后 在 不 同 状态 时 进行 转换 ， 如 代码 清单 20-15 所 示 是 选中 和 未 选中 状态 的 互相 转换 。 


代码 清单 20-15 ”选中 格子 状态 互相 切换 


是 否 选择 某 个 格子 


function chooseIcon (node,isChoose) 
if node == nil then 
return 
end 


node:getChildByTag (HZ NORMAL TAG):setVisible (not isChoose) 
node:getChildByTag (HZ SELECT TAG):setVisible (isChoose) 
end 


显示 的 界面 如 图 20-7 所 示 。 


图 20-7 游戏 中 界面 


显示 处 理 好 了 以 后 ， 就 可 以 处 理 和 用 户 交 互 部 分 ， 即 实现 三 个 触摸 函数 ，onTouchBegan 函 数 见 代 码 清单 20-16， 判 断 是 否 已 经 有 选中 的 方块 ， 如 果 有 并 且 两 个 选中 的 块 相 邻 就 交换 这 两 个 块 。 


代码 清单 20-16 ”触摸 开始 函数 实现 


开始 按 下 
local onTouchBegan = function (x, y) 
m isTouching - true 
m touchStartPoint = (x = x,y = y] 


m touchStartIndex = m gridLogic.getIndexByPoint (x, y) 


判断 是 否 已 经 有 选中 的 方块 
if m curSelectTag ~= nil then 
local curSelectIndex - 
m gridLogic.revertTagToIndex (m curSelectTag) 


如 果 相 邻 就 叫唤 两 个 节点 
if m gridLogic.isNearby (curSelectIndex,m touchStartIndex) then 
m switchPair[1] = curSelectIndex 
m switchPair[2] = m touchStartIndex 


exchangeGrid (curSelectIndex, 
m touchStartIndex,checkIsClear) 
return true 


end 
end 
chooseGrid(m touchStartIndex.x,m touchStartIndex.y) 
return true 
end 


知 移动 回调 onTouchMoved 函 数 被 调用 ， 和 onTouchBegan 类 似 ， 也 是 判断 是 否 和 选中 的 块 相 邻 ， 如 果 相 邻 就 交换 两 个 块 ， 见 代码 清单 20-17。 


代码 清单 20-17 ”触摸 点 移动 和 触摸 结束 回调 函数 


移动 按 下 

local onTouchMoved = function (х,у) 

local touchCurIndex = m gridLogic.getIndexByPoint(x, y) 
if m isTouching then 


如 果 相 邻 则 交换 
if m gridLogic.isNearby (touchCurIndex,m touchStartIndex) then 
m switchPair[1] = touchCurIndex 
m switchPair[2] = m touchStartIndex 


exchangeGrid (touchCurIndex,m touchStartIndex, checkIsClear) 
return true 


end 
end 
end 


停止 按 下 
local onTouchEnded 
m isTouching 


function (x, y) 
false 


end 


通过 chooseGrid 函 数 选中 基 个 模块 ， 图 20-8 左 上 角 的 图 标 被 选中 。 


如 果 已 经 选中 一 个 模块 ， 再 选中 一 个 块 就 可 以 通过 调用 isNearby 判 断 是 否 两 个 图 块 反 着， 如 果 挨 着 就 交换 两 个 图 块 ， 


代码 清单 20-18 ”交换 图 块 函数 


交换 两 个 点 
local function exchangeGrid (grid1,grid2,callback) 

m isTouching = false 

resetSelectGrid() 

local tagl = m gridLogic.revertIndexToTag (gridl.x,gridl.y) 

local tag2 = m gridLogic.revertIndexToTag (grid2.x,grid2.y) 

local nodel = m rootLayer:getChildByTag (m grid start tag + tagl) 

local node2 = m rootLayer:getChildByTag (m grid start tag + tag2) 
标签 交换 

if nodel == nil or node2 == nil then 

return 
end 


local pointlx,pointly 
local point2x,point2y 
local function moveEnd() 


m gridLogic.getGridPoint (gridl.x,gridl.y) 
m gridLogic.getGridPoint (grid2.x,grid2.y) 


node2:setTag (m grid start tag + tagl) 
nodel:setTag (m grid start tag + tag2) 
m gameGrid.exchangeData (gridl,griqd2) 


if callback then 
callback () 
end 


end 


动作 序列 
local sequence = cc.Sequence:create (cc.MoveTo:create( 
0.1,cc.p(m gridLogic.getGridPoint (grid2.x,grid2.y))), 
cc.CallFunc:create (moveEnd)) 

nodel:runAction (sequence) 

node2:runAction (cc.MoveTo:create (0.1, 

cc.p(m gridLogic.getGridPoint (gridl.x,gridl.y)))) 


end 


图 20-8 选中 块 
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A 
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换 动画 函数 见 代 码 清单 20-18。 


交换 图 块 后 ， 交 换 两 个 图 块 代表 的 数据 ， 之 后 判断 是 否 可 以 消除 ， 如 果 不 可 以 消除 的 ， 表 把 两 个 图 块 交换 回来 ， 见 代码 清单 20-19。 


代码 清单 20-19 ”消除 相关 函数 


检测 是 否 消除 

local checkIsClear = function() 

local clearTable = {} 

for i = 1,#m switchPair do 

if m gameGrid.checkGrid(m switchPair[i]) then 
clearTable[f$clearTable + 1] = m switchPair[i] 

end 


end 


不 可 以 消除 

if #clearTable == 0 then 
exchangeGrid(m switchPair[1],m switchPair[2],nil) 
m switchPair = {} 


消除 相同 的 块 
else 
clearGrid (clearTable) 


Et 


end 
end 


clearGrid 函 数 做 两 个 工作 ， 一 个 是 清除 数据 ， 另 一 个 是 显示 方块 上 的 删除 动画 。clearGrid 做 清除 数据 ， 其 中 调用 clearGridshow 调 用 删除 方块 的 动画 ， 两 个 函数 的 具体 实现 见 代码 清单 20-20。 


代码 清单 20-20 消除 相同 方块 


消除 动画 
local clearGridShow = function (clearTable) 
for i = 1, 4clearTable do 


ocal tag = 
m gridLogic.revertIndexToTag (clearTable[i].x,clearTable[i].y) 
local node = m rootLayer:getChildByTag (m grid start tag + tag) 
node:setTag(m grid romove tag + tag) 
m gameGrid.clearGridDataByIndex ( 
clearTable[i].x,clearTable[i].y) 
m gameObj.clearIcon (node) 
end 


end 


消除 

clearGrid = function (clearTable) 
local needClearTable = {} 
local flagTable = {} 

for і = 1, #clearTable do 


local tempTable = m gameGrid.getClearTable (clearTable[i]) 
for i = 1, #tempTable do 

local grid = tempTable[i] 

local tag = m gridLogic.revertIndexToTag (grid.x,grid.y) 
if flagTable[tag] == nil then 

flagTable[tag] = true 
needClearTable[4needClearTable + 1] = grid 


end 
end 
end 


调用 消除 动画 

clearGridShow (needClearTable) 

m rootLayer:runAction (cc.Sequence:create (cc.DelayTime:create (0.2), 
cc.CallFunc:create (refreshGrid))) 


end 


首先 找到 可 以 消除 的 点 ， 如 果 未 消除 则 换 回 两 个 图 块 ， 然 后 调用 相应 消除 函数 ， 消 除 后 进一步 生成 新 的 图 块 并 从 上 面 落下 来 ， 见 代码 清单 20-21。 


代码 清单 20-21 ”生成 新 图 块 并 落下 


更 新 后 检测 是 否 新 的 方块 可 以 一 起 消除 


local gridFallAndCheck = function() 
local clearTable = {} 
for i = 1,fm grid down table do 
检测 是 否 有 可 以 消除 
if m gameGrid.checkGrid(m grid down table[i]) then 
clearTable[4clearTable + 1] = m grid down table[i] 
end 
end 
m grid down table = {} 
清除 方块 


if #clearTable ~= 0 then 
learGrid (clearTable) 


О 


end 
end 


相同 的 方块 被 删除 后 ， 就 需要 填充 新 的 方块 。 首 先生 成 新 的 方块 数据 ， 然 后 为 方块 添加 移动 动画 ， 填 充 在 新 的 位 置 上 ， 见 代码 清单 20-22。 


代码 清单 20-22 ”更 新 棋盘 函数 


local refreshGrid = function() 
local clearTable,newTable,moveTable = m gameGrid.updateGrid() 
local moveNodeTable = í() 


for i = 1, HZBoardSizeX do 
if clearTable[i] ~= nil then 
local aimpos = {х = clearTable[i].x,y = clearTable[i].y) 
原 有 的 向 下 移动 

for j = 1, #(moveTable[i]) do 
local grid = {х = moveTable[i][j].x, y = moveTable[illjl.y) 
local tag = m gridLogic.revertIndexToTag (grid.x,grid.y) 
local node - 
m rootLayer:getChildByTag (m grid start tag + tag) 
local aimTag = 100 * 
m gameGrid.getGridDataByIndex(grid.x,grid.y) + 10 * 
aimpos.x + aimpos.y 
node:setTag (m grid down tag + aimTag) 
moveNodeTable [4moveNodeTable + 1] = {} 
moveNodeTable [i4moveNodeTable][1] = node 
moveNodeTable [#moveNodeTable] [2] = aimpos 
aimpos = {x = aimpos.x,y = aimpos.y + 1j 

end 


新 增加 的 


for j = 1, 4(newTable[i]) do 

local node - m gameObj.createlconById (newTable 
node:setPosition(m gridLogic.getGridPoint (i, 10) 
local desTag = 100 * newTable[i][j] 

+ 10 * aimpos.x + aimpos.y 
node:setTag(m grid down tag + desTag) 


m rootLayer:addChild (node) 


moveNodeTable [4moveNodeTable + 1] = {} 
moveNodeTable [4imoveNodeTable][1] = node 
moveNodeTable [#moveNodeTable] [2] = aimpos 
aimpos = (x = aimpos.x,y = aimpos.y + 1j 
end 
end 
end 
真正 的 移动 
for i = 1, #moveNodeTable do 


local node = moveNodeTable[i][1] 

local aimIndex = moveNodeTable[i][2] 

local moveEnd = function() 

local tag - node:getTag() - m grid down tag 
local value = math.modf(tag / 100) 
tag — tag - value * 100 

m | gameGrid. setGridDataByIndex (math.modf (tag / 10), 
tag $ 10,value) 
node:setTag(m grid start tag + tag) 


end 
local sequence = cc.Sequence:create (cc.MoveTo:create (0.1, 
cc.p(m gridLogic.getGridPoint (aimIndex.x,aimIndex.y))), 
cc.CallFunc:create (moveEnd)) 

node: runAction (sequence) 

m grid down table[#m grid down table + 1] = aimIndex 

end 
m rootLayer:runAction (cc.Sequence:create (cc.DelayTime:create (0.2), 
cc.CallFunc:create (gridFallAndCheck))) 


end 
首先 遍历 每 一 列 ， 检 测 哪些 点 需要 落下 ， 哪 些 点 需要 生成 ， 并 把 落下 的 目标 位 置 计 算出 来 ， 然 后 播放 动画 ， 动 画 完毕 后 再 检测 新 的 棋盘 是 否 依然 有 可 以 消除 的 点 。 这 样 这 个 游戏 的 消除 生成 逻辑 就 基本 
实现 了 。 


204 本章 小 结 


本 章 介 绍 了 一 款 简 单 的 消除 类 游戏 的 实现 过 程 。 通 过 本 章 介 绍 ， 学 习 了 采用 Cocos2D-X+Lua 实 现 游戏 功能 的 方法 ， 可 以 自己 进一步 完善 修改 游戏 。 


至 此 ， 实 例 篇 分 别 介绍 了 Javascript 绑 定 的 纵 版 射击 游戏 噶 星 战争 ，C++ 的 横 版 游戏 ， 使 用 物理 引擎 的 体育 类 游戏 ， 以 及 采用 Lua 绑 定 的 消除 游戏 ， 从 游戏 类 型 和 Cocos2D-X 技 术 两 个 方向 展开 四 个 不 
同 的 实例 ， 可 以 对 Cocos2D-X 的 开发 有 更 深 的 认识 ， 其 实在 目前 的 开发 中 ,混合 使 用 C++ 和 脚本 开发 的 模式 越 来 越 多 ， 学 习 脚 本 开发 和 C+ + 开发 已 经 同样 的 重要 了 ，。 


附录 Cocos2D-X 中 常见 的 宏 


Cocos2D-X 提 供 了 很 多 宏 ， 很 大 程度 上 方便 开发 者 ， 另 外 还 有 一 些 封装 的 功能 ， 比 如 随机 数 的 生成 等 功能 。 具 体 介 绍 如 下 表 所 示 。 


R 名 称 作 用 
Cocos2D-X 命名 空间 开始 ， 属 于 Cocos2D-X 的 类 的 定义 以 该 
ERA, HURE C++ 中 的 “namespace cocos2dí " 
Cocos2D-X 命名 空间 结束 ， 属 于 Cocos2D-X 的 类 的 定义 以 该 
Aw. HURE "YT 
USING NS CC 声明 Cocos2D-X hmt ail, AEE “using namespace cocos2d " 
Cocos2D-X АУ 3 E Fg B] ag 45 25 [8] JT 28, fV $$ " namespace 


cocos2d { namespace extension {” 
NS CC EXT END Cocos2D-X WJD Reef ag 2218] ЖН. RE "337 
声明 Cocos2D-X 扩展 库 的 命名 空间 ， 人 代替“using namespace 


cocos2d::extension " 


NS CC BEGIN 


NS CC END 


NS CC EXT BEGIN 


USING NS CC EXT 


CCLOG 至 制 台 输出 

CCLOGERROR 宝 制 台 输出 ， 可 以 分 类 为 错误 值 
CCLOGINFO 控制 台 输 出 ， 可 以 分 类 为 输出 信息 
CCLOGWARN 控制 台 输 出 ， 可 以 分 类 为 警告 信息 
CC SAFE DELETE 安全 删除 ， 首 先 检 查 是 否 为 空 

CC SAFE DELETE ARRAY 安全 删除 数组 

CC SAFE FREE 安全 释放 对 象 

CC SAFE RELEASE 安全 释放 

CC SAFE RELEASE NULL 安全 释放 为 空 

CC SAFE RETAIN 安全 保留 


CC BREAK IF 如 果 传 人 值 为 真 则 跳出 


CC PROPERTY 


CC PROPERTY PASS BY REF 
CC PROPERTY READONLY 


CC PROPERTY READONLY PASS BY REF 
CC SYNTHESIZE 
CC SYNTHESIZE PASS BY REF 


CC SYNTHESIZE RETAIN 


Ж 名 W 
CC SYNTHESIZE READONLY 


CC SYNTHESIZE READONLY PASS BY REF 


CC SWAP 

CCRANDOM MINUSI 10 
CCRANDOM 0 10 

CC DEGREES TO RADIANS 
CC RADIANS TO DEGREES 


CC CONTENT SCALE FACTOR 


CC RECT PIXELS TO POINTS 


CC RECT POINTS TO PIXELS 
CC POINT PIXELS TO POINTS 
CC POINT POINTS TO PIXELS 
CC SIZE PIXELS TO POINTS 
CC SIZE POINTS TO PIXELS 


则 返回 2, 


声明 变量 ， 第 一 个 参数 是 变量 类 型 ， 第 二 个 参数 是 变量 名 ， 第 
三 个 参数 是 : get/ Set 因数 名 注意 get t/set PR ACER; 2: ЛП 以 实现 

同上 ,不同 的 是 get AOR [917551 FH. 

同 CC PROPERTY, ， 不 同 的 是 只 该 属性， 没有 set РАЖ 


同 CC PROPERTY PASS BY REF， 不 同 的 是 只 读 属 性 ，}; 


有 set PRX 

同 CC PROPERTY, ， 不 同 的 是 set/get 图 数 均 有 实现 

同 CC PROPERTY PASS BY REF， 不 同 的 是 set/get 图 数 均 
有 实现 

|5] CC SYNTHESIZE PASS BY REF， 获 得 对 象 并 保留 


(Ж) 

Ее H 

同 CC_SYNTHESIZE， 不 同 的 是 只 读 属 性 ， 没 有 set 函数 
司 СС SYNTHESIZE PASS BY REF, 不 同 的 是 内 读 属 性 ， 
没有 set FRA 

交换 两 个 变量 ,第 三 个 参数 为 类 型 
获得 -1 到 1 之 间 的 随机 数 
获得 0 到 1 之 间 的 随机 数 ， 注 意 0 和 1 是 都 可 以 取 到 的 


角度 制 转化 为 弧度 制 
一 一 一 一 一 一 
如 果 在 Мас 系统 上 返 
否则 返回 1 
将 矩形 由 像 双 坐标 转化 为 点 坐标 (只 


， 在 IPhone 上 ， 如 果 是 Retina 屏幕 


ТЕ Retina F F E 2 [8 


Hi. ACHT АК Ж ААВ ES ЧА pR] ) 


将 矩形 由 点 坐标 转化 为 像素 坐标 
将 点 由 像 系 坐标 转化 为 点 坐标 

Ties HH Ea АРКА PR ER Abs 
ЖКГА Н ж A pipe EON ea Ар 
ЖУГУ HH дд ЛЕЙ T6 7 TCR AES 


